从不同元素调用jQuery函数

问题描述：

我对jQuery世界非常陌生，所以我希望得到一些帮助。从不同元素调用jQuery函数

我正在创建一个有一个div的页面，里面有一些复选框。

这些复选框中的每一个都包含在它们自己的div中。

<div> 
    <div> 
     <input type='checkbox' name='cb1' /> 
     <div id="info1"> 
      Hide 
     </div> 
    </div> 
    <div> 
     <input type='checkbox' name='cb2' /> 
     <div id="info2"> 
      Hide 
     </div> 
    </div> 
</div>

我需要写一个jQuery函数，能够捕捉到任何时候复选框（CB1或CB2）点击隐藏/显示它的相应的“信息”的div（INFO1或INFO2）。

我打算有100多个复选框，所以我希望有一种方法可以做到这一点，而不必为click（）写100多个函数。

谢谢，
马克

马克 - 我刚刚更新了我的答案。起初我没有注意到你会有超过100个这样的复选框。在这种情况下，你应该真的使用'.delegate（）'，这样jQuery不必管理100个独立但相同的事件处理程序。查看我的更新。：o） – user113716 2010-10-08 20:58:21

答

试试这个：

$("input[type=checkbox]").change(function() { 
    var checkID = $(this).attr('name').substr(2); 
    $("#info" + checkID).slideToggle("slow"); 
});

如果复选框最初未选中，则其信息div应该在其上声明display: none;。

希望这会有所帮助！

这就是我要找的！看起来我有很多东西需要学习。任何关于在哪里了解更多关于选择器的建议？ – Mark 2010-10-08 20:52:23

[jQuery Selectors]（http://api.jquery.com/category/selectors/）可能是最好的地方。 – 2010-10-08 20:57:58

答

这是一个更容易带班对你的目标项目，并穿越而不是使用特定ID的DOM：

<input class='check' type='checkbox' name='cb1' /> 
<div id="info1"> 
Hide 
</div> 



$('.check').click(function(){ 
    $(this).next().toggle() 
})

答

$("input[type=checkbox]").click(function(){ 
    if (this.checked) 
    $(this).next("div").show(); 
    else 
    $(this).next("div").hide(); 
});

答

这在所有的复选框，其中nameattribute starts withcb地方a .change() handler。

当更改发生时，它会遍历到the .next() element兄弟和calls .toggle()，它将根据复选框是否被选中来显示/隐藏。

示例使用HTML：http://jsfiddle.net/fWYtv/

$('input:checkbox[name^=cb]').change(function() { 
    $(this).next().toggle(this.checked); 
});

编辑：

既然你说，将有超过这些100，它真的会更好地使用.delegate() ，所以你只有一个处理程序而不是100.

采取的主要<div>这是所有的容器中，并给它一个ID喜欢container，所以你最终：

<div id='container'> 
    <div> 
     <input type='checkbox' name='cb1' /> 
     <div ...

然后call .delegate()上，并设置input为目标事件。

像这样：

例子：http://jsfiddle.net/fWYtv/1/

$('#container').delegate('input:checkbox[name^=cb]', 'change', function() { 
    $(this).next().toggle(this.checked); 
});

这将是要走多更有效的方式。

+1我喜欢使用'this.checked'。 – 2010-10-08 20:42:45

@Freek - 谢谢。 '.toggle（）'是一个方便的特性，它能够传递一个布尔值来确保正确的显示/隐藏完成。 – user113716 2010-10-08 20:44:13

确实如此，它实际上给了我一个在我自己的项目中困扰我的东西的想法。 – 2010-10-08 20:46:06

答

如果您有大量复选框，请考虑在其共同祖先上使用delegate，因为它比设置数百个事件处理程序要快得多。

从不同元素调用jQuery函数

相关推荐