jQuery：动态事件如何实现
[英]jquery : dynamic events how to achieve
问题描述
What is the best way to do this dynamic events linking between divs in jquery. 
在jQuery中的div之间进行动态事件链接的最佳方法是什么？
my HTML page: 我的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>
for each clicked parent i want to .toggle its child 对于每个要单击的父级，我要切换其子级
Example :: if parent2 clicked, .toggle will be applied on child2 only
my parents and childs divs are dynamically created so their number is not static, i think .live should be used here, but i have no idea how to achieve that. 我的父母和孩子的div是动态创建的，因此它们的数量不是静态的，我认为.live应该在这里使用，但我不知道如何实现。
Thanks 谢谢
4 个解决方案
解决方案1
0 已采纳 2010-02-15 11:04:24
This should do it, using the rel attribute to note link. 应该使用rel属性来注释链接。 You could also do the same thing by parsing the ID and so on, but I find this solution more semantic (if it means something) : 您也可以通过解析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();
});
});
解决方案2
0 2010-02-15 11:04:36
Use a class for these divs and use the class selector. 为这些div使用一个类，并使用类选择器。
$(".divclass").live ( "click" , function() {
$(this).find("yourchildelementselector").toggle();
});
If its a parent child relation then better put the child divs inside the parent element. 如果它是父子关系，则最好将子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>
and you can call the click event as 您可以将click事件称为
$("div.parent").live ( "click" , function() {
$(this).find("div.child").toggle();
});
解决方案3
0 2010-02-15 11:13:08
This will work with your current structure (another option is to extract the number, same general idea): 这将适用于您当前的结构（另一个选择是提取数字，相同的基本思路）：
$("[id^=parent]").live('click', function(){
var childId = this.id.replace('parent', 'child');
$('#' + childId).toggle();
});
解决方案4
0 2010-02-15 11:16:16
Using the startsWith selector and slightly modded ID values, because the underscore character eliminates the need for a regex: 使用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();
});
I also like @Kobi's approach. 我也喜欢@Kobi的方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.