切换具有相同的类名
我有使用jQuery切换的问题。当我对某些标签使用相同的类名时,我只想单击按钮即可获得一个事件。切换具有相同的类名
我的一些代码位于下方,如果点击名为'1'的按钮,它将显示'2'和'5'的行,因为它们具有相同的类名'detail'。然而,如果我点击'1',我想只显示'2'的行。
我不愿意使用不同的名称,因为它应该有很多具有切换功能的行。这意味着我需要为每个标签提供许多名称。
请帮助我一些解决方案和建议,谢谢。
---脚本----
<script>
$(".button").click(function() {
$(".detail").slideToggle("slow");
});
$(".button2").click(function() {
$(".detail2").slideToggle("slow");
});
</script>
--- HTML -----
<table class="w850 table">
<tr>
<td class="w50">
<input type="checkbox" />
</td>
<td class="w50">
<input type="button" value="1" class="button"/>
</td>
<td class="w250">
Scan
</td>
<td class="w250">
Status
</td>
<td class="w250">
Ship Type
</td>
</tr>
<tr class="detail" style="display: none">
<td class="w50">
<input type="checkbox" />
</td>
<td class="w50">
<input type="button" value="2" class="button2"/>
</td>
<td class="w250">
Scan
</td>
<td class="w250">
Status
</td>
<td class="w250">
Ship Type
</td>
</tr>
<tr class="detail2" style="display: none">
<td class="w50">
<input type="checkbox" />
</td>
<td class="w50">
<input type="button" value="3" />
</td>
<td class="w250">
Scan
</td>
<td class="w250">
Status
</td>
<td class="w250">
Ship Type
</td>
</tr>
<tr>
<td class="w50">
<input type="checkbox" />
</td>
<td class="w50">
<input type="button" value="4" class="button"/>
</td>
<td class="w250">
Scan
</td>
<td class="w250">
Status
</td>
<td class="w250">
Ship Type
</td>
</tr>
<tr class="detail" style="display: none">
<td class="w50">
<input type="checkbox" />
</td>
<td class="w50">
<input type="button" value="5" class="button2"/>
</td>
<td class="w250">
Scan
</td>
<td class="w250">
Status
</td>
<td class="w250">
Ship Type
</td>
</tr>
<tr class="detail2" style="display: none">
<td class="w50">
<input type="checkbox" />
</td>
<td class="w50">
<input type="button" value="6" />
</td>
<td class="w250">
Scan
</td>
<td class="w250">
Status
</td>
<td class="w250">
Ship Type
</td>
</tr>
</table>
$(".button").click(function() {
$(this).closest("tr").siblings(".detail:first").slideToggle("slow");
});
$(".button2").click(function() {
$(this).closest("tr").siblings(".detail2:first").slideToggle("slow");
});
这将选择第一排.detail
你可以在这里看看http://jsfiddle.net/4KP9Y/2/工作代码
如果你的按钮在行里找到你也许可以做这样的事情:
$(".button").click(function() {
$(this).closest("tr").siblings(".detail2").show()
});
你可能想看看jQuery的功能遍历DOM。意思是从这里到达那里:http://api.jquery.com/category/traversing/
谢谢,但是当我点击按钮'1'时,它会显示'2'。并点击'2',它会显示'3'。所以你提供给我的代码应该是“.detail”而不是“.detail2”,不是吗?对不起,给了一个困惑。 我已更改代码并尝试过,但仍显示'2'和'4'两行... – user1354470 2012-04-24 19:15:30
正如其他人所说不知道按钮在您的页面上显示的位置,很难找出它们与每一行之间的关系。我仍然认为了解遍历可能会帮助您找到解决方案。 – 2012-04-24 19:20:36
我明白了。我也尝试找到一个解决方案。不管怎样,谢谢你。 – user1354470 2012-04-24 19:38:39
谢谢,但是当我点击'1'时它仍然显示'2'和'4'。 – user1354470 2012-04-24 19:41:26
我更新了code.missing属性 – 2012-04-24 19:44:28
谢谢,但它没有奏效。不管怎么说,还是要谢谢你。 – user1354470 2012-04-24 21:13:30