Question

在jquery中执行此div之间链接的动态事件的最佳方法是什么。

我的HTML页面：

<html>
<body>
<div id="parent1"></div>
<div id="parent2"></div>
<div id="parent3"></div>
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</body>
</html>

对于每个单击的父级我想要.toggle其子级

示例::如果单击parent2，则.toggle将仅应用于child2

我的父母和孩子的div是动态创建的，所以他们的数字不是静态的，我认为.live应该在这里使用，但我不知道如何实现。

谢谢

Answer 1

这应该这样做，使用rel属性来记录链接。您也可以通过解析ID等来做同样的事情，但我发现这个解决方案更具语义性（如果它意味着什么）：

<html>
<body>
<div id="parent1" class="parents" rel="child1"></div>
<div id="parent2" class="parents" rel="child2"></div>
<div id="parent3" class="parents" rel="child3"></div>
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</body>
</html>

jQuery(function(){
  jQuery(".parents").live("click", function(){
     jQuery("#"+jQuery(this).attr("rel")).toggle();
  });

});

Answer 2

为这些div使用一个类并使用类选择器。

$(".divclass").live ( "click" , function() {
    $(this).find("yourchildelementselector").toggle();
});

如果是父子关系，那么最好将子div放在父元素中。

<div id="parent1" class="parent"><div id="child1" class="child"></div></div>
<div id="parent2" class="parent"><div id="child2" class="child"></div></div>
<div id="parent3" class="parent"><div id="child3" class="child"></div></div>

您可以将点击事件称为

$("div.parent").live ( "click" , function() {
        $(this).find("div.child").toggle();
});

Answer 3

这将适用于您当前的结构（另一个选项是提取数字，相同的一般想法）：

$("[id^=parent]").live('click', function(){
   var childId = this.id.replace('parent', 'child');
   $('#' + childId).toggle();
});

Answer 4

使用startsWith选择器和略微修改的ID值，因为下划线字符消除了对正则表达式的需要：

<div id="parent_1" class="parents"></div>
<div id="parent_2" class="parents"></div>
<div id="parent_3" class="parents"></div>
<div id="child_1"></div>
<div id="child_2"></div>
<div id="child_3"></div>

$("div[id^=parent]").click(function() {
   $('#child_' + $(this).attr('id').split('_')[1]).toggle(); 
});

我也喜欢@Kobi的方法。

jquery：动态事件如何实现

4 个答案: