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的 - 可重複使用複選框功能

回答

相關問題