jQuery的 - 可重复使用复选框功能

我已经与我有限的知识的JQuery碰壁，我使用了一些复选框：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(); 
    });

所以我的问题：我从哪里开始？我在哪里可以更多地了解如何为这样的事情创建可重用的函数？或者，如果你真的想宠坏我，那么可能的解决方案或暗示呢？

谢谢您的时间，德拉甘

来源

2012-10-02 Dragan

你可以通过动态构建一个选择一次性全部定位的元素：

$('input[id^="e_"]').change(function() { 
    $('#' + this.id + '_div').toggle(); 
});

来源

2012-10-02 09:59:17 Blender

我知道这很简单！谢谢搅拌机！ – Dragan

@Blender - 嘿，你能解释'输入[id^=“e_”]'规则吗？^=“e_”是否意味着它以e_开头并且之后可以有任何内容？ – kiddorails

是的。看看jQuery（和CSS）[属性选择器]（http://api.jquery.com/category/selectors/）。 – Blender

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

$("input:checkbox").change(function(){ 
    $(this).next('div').toggle(); 
});

来源

2012-10-02 10:03:58 soonji

如果我是正确的，当前的结构将不会允许我接下来使用，因为包含复选框的“控制面板”不是div的兄弟，忘了指定，对不起！ – Dragan

哦，我看到了...它的确定 – soonji

它是否在复选框附近？因为如果它是你可以使用这个你可以指定在next（）方法内的元素 – soonji

请在下面找到简单的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-02 10:25:13 Aratidgr8

这是一个有趣的解决方案，谢谢 – Dragan

jQuery的 - 可重复使用复选框功能

回答

相关问题