DEMO fiddle

Question

这是我第一次尝试jQuery，我正在使用我在这里找到的基本教程：http://papermashup.com/simple-jquery-showhide-div/#

这是我当前的代码以及jQuery的工作原理：http://jsfiddle.net/mZQsu/

如您所见，当您单击“+/-”时，它会打开所有4个表/ DIV。

如何修改此代码以根据原始表打开相关的辅助表/ div？

（请注意，辅助表是从PHP和SQL数据动态生成的）

感谢。

P.S我的所有代码都在这里http://jsfiddle.net/mZQsu/而不是堵塞这个问题页面：）

Answer 1

最好的解决方案是使用id标记每个div。例如。

<div class="slidingDiv" id="ip_127_0_0_1">

然后修改等效链接

$("#ip_127_0_0_1").slideToggle();

所以只是相关的div被扩展。

Answer 2

DEMO fiddle

$('.toggler').click(function() {   // had to differentiate the main togglers with a new class
    var ind = $(this).parents('tr').index()-1;    // could change
    $(".slidingDiv").eq(ind).slideToggle();
});

$('.show_hide').click(function() {   // this are the 'togglers' inside the big menus
    $(this).parents(".slidingDiv").slideToggle();
});

Answer 3

请参阅我的更新小提琴：http://jsfiddle.net/mZQsu/1/

您可以使用行的索引，并使用jQuery index和eq

仅切换其他表的匹配行

请参阅此处的relivant文档：

Answer 4

这应该有效：

$('.show_hide').click(function() {
    $(this).parents(".slidingDiv").slideToggle();
});

由于slidingDiv类是show_hide链接的直接父级，我可以使用“父级”而不是“父级”。后者提供了更大的灵活性，因为它遍历所有寻找该类的祖先。

Answer 5

以下是修改后的代码 - http://jsfiddle.net/mZQsu/3/

我添加了show-hide1，show-hide2，show-hide3，show-hide4。点击它分别打开slidingDiv1，slidingDiv2，slidingDiv3，slidingDiv4。

Answer 6

绑定到事件时：您始终可以获取该事件目标并引用它。

$('.show_hide').click(function(e) {
    $(e.target).parent("div.slidingDiv").slideToggle();
});

.parent（）是一个很好的起点，但.closest（）也可以工作。话虽如此，这是首选的方式。

另外，如果你想做相反的事情你可以使用.not（e.target）和除你点击之外的所有其他元素。

Answer 7

由于您的html是由PHP生成的，因此为+ - 链接和滑动div包含唯一ID应该不会有问题，例如：

a href="#" class="show_hide" id="show_hide2"

和 div class =“slidingDiv”id =“slidingDiv2”

然后在您的点击功能中，您将获得要打开的div的索引：


    $(.show_hide).click(function(){
    var $str = $(this).attr('id');
    var $index = $str.charAt( $str.length-1 );
    });

现在您可以使用index打开div：


    var divName = "#slidingDiv" + $index;
    $(divName).slideToggle();

如何使用jQuery一次显示/隐藏一个动态元素（div）

7 个答案:

DEMO fiddle