從不同元素調用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多個函數。

謝謝，
馬克

來源

2010-10-08 Mark

馬克 - 我剛剛更新了我的答案。起初我沒有注意到你會有超過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;。

希望這會有所幫助！

來源

2010-10-08 20:34:19

這就是我要找的！看起來我有很多東西需要學習。任何關於在哪裏瞭解更多關於選擇器的建議？ – 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() 
})

來源

2010-10-08 20:32:48

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

來源

2010-10-08 20:34:28

這在所有的複選框，其中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); 
});

這將是要走多更有效的方式。

來源

2010-10-08 20:37:28 user113716

+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，因爲它比設置數百個事件處理程序要快得多。

來源

2010-10-09 07:34:46 Tgr

從不同元素調用jQuery函數

回答

相關問題