1

我在 JQuery 知识有限的情况下遇到了困难，我使用了许多复选框：

    <input id="e_1" class="hiders" type="checkbox">
    <label for="e_1">Hide Element 1</label>

    <input id="e_2" class="hiders" type="checkbox">
    <label for="e_2">Hide Element 2</label>

    //Currently 6 of the above, with unique id's and shared class

我想创建一个通用（和可重用的函数）来隐藏相关的 div：

    <div id="e_1_div"> content </div>

    <div id="e_2_div"> content </div>

    //Currently 6 of the above, with unique id's and shared class

以下解决方案是我目前正在使用的解决方案（每个复选框的单独功能），我有限的知识告诉我它的格式非常错误，并且可能还会消耗大量不必要的能量。

    $('#e_1').change(function(){
       $('#e_1_div').toggle();
    });

    $('#e_2').change(function(){
       $('#e_2_div').toggle();
    });

所以我的问题是：我从哪里开始？我在哪里可以了解更多关于为这样的东西创建可重用函数的信息？或者，如果您真的想宠坏我，有什么可能的解决方案或提示？

谢谢你的时间，德拉甘

4

3 回答 3

1

您可以通过动态构造选择器来一次定位所有元素：

$('input[id^="e_"]').change(function() {
    $('#' + this.id + '_div').toggle();
});
于 2012-10-02T09:59:17.193 回答
1

试试这个..这样你就可以动态触发它

$("input:checkbox").change(function(){
  $(this).next('div').toggle();
});​
于 2012-10-02T10:03:58.280 回答
0

请在下面找到简单的 jquery 脚本，它会做必要的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Checkbox</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".hiders").change(function(){
        var currentId = $(this).attr('id');
        var divId = currentId+"_div";
        $("#"+divId).toggle();
    });

});
</script>

</head>

<body>

<input id="e_1" class="hiders" type="checkbox" /><label for="e_1">Hide Element 1</label>

<input id="e_2" class="hiders" type="checkbox" /><label for="e_2">Hide Element 2</label>

<div id="e_1_div">element - 1</div>

<div id="e_2_div">element - 2</div>

</body>
</html>
于 2012-10-02T10:25:13.200 回答