單擊父級複選框時顯示子複選框

我有一組隱藏在其受衆羣組下的複選框。現在，我想要顯示這些隱藏的複選框onclick的觀衆組名稱。單擊父級複選框時顯示子複選框

您可以用在這裏看到更多的代碼IM的：http://jsfiddle.net/CnmEA/

我有這方面的HTML代碼示例：

<div class='audience-group'> 
    <input type='checkbox' class='audience-group-checkbox' value='9' /> 
    <div class='audience-group-name'> 
     JGG Enterprises 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='7' /> 
    <div class='audience-name'> 
     Mucho, George 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='9' /> 
    <div class='audience-name'> 
     Bo, Jen 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='10' /> 
    <div class='audience-name'> 
     Gin, Junto 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='12' /> 
    <div class='audience-name'> 
     Molina, Greg 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='36' /> 
    <div class='audience-name'> 
     Berkely, Dada 
    </div> 
</div> 
<div class='audience-group'> 
    <input type='checkbox' class='audience-group-checkbox' value='8' /> 
    <div class='audience-group-name'> 
     GBA Inc. 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='1' /> 
    <div class='audience-name'> 
     Kapate, Jones 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='2' /> 
    <div class='audience-name'> 
     Bingo, Gringo 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='4' /> 
    <div class='audience-name'> 
     Doe, John 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='8' /> 
    <div class='audience-name'> 
     Merio, Horhe 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='35' /> 
    <div class='audience-name'> 
     Dalisay, JM 
    </div> 
</div>

IM使用下面的jQuery代碼：

的$（document）。（功能（）{

$('.audience-group-name').each(function(){ 

    $(this).click(function(){ 

     $(this).find('.audience').show(); 
    }); 
});

}）;

我有點新jQuery，感謝任何幫助！

來源

2011-12-07 Mico

這裏有一個工作示例：http://jsfiddle.net/CnmEA/5/

而且修改後的JS：

$('.audience-group-name').click(function() { 
     $(this).parent().nextUntil('.audience-group').show(); 
});

與JS的主要問題是$(this).find('.audience').show()。 jQuery find()方法查找調用方法的jQuery對象的後代。在這種情況下，該對象是$(this)，它指的是類別爲.audience-group-name的元素。但是，您要顯示的元素不是該元素的後代。您需要上升一個級別（.parent()），然後選擇所有下一個元素，直到到達類別爲.audience-group的下一個元素。

您還會注意到，我刪除了你的代碼中.each()方法。當您將click事件綁定到$('.audience-group-name')時，它將綁定到具有該類的任何元素。當其中一個元素被點擊時，它會找到正確的元素來顯示，因爲$(this)將提供正確的上下文。它提供了被點擊的實際元素，因此DOM遍歷方法.parent().nextUntil(...)將找到正確的元素。

來源

2011-12-07 14:39:04 maxedison

我只是改變.show（）to .toggle（）;這正是我所期待的。非常感謝@maxedison的一個很好的解釋！我學到了一些新東西。 :) – Mico

不錯。我不知道'nextUntil（）'。 – ScottS

find()函數查找您選擇的元素的子元素。你應該尋找父母的兄弟姐妹like so

作爲一般設計注意事項：構建樹結構時有一個典型的HTML錯誤 - 使用填充/邊距來模擬左偏移量。這樣做的正確方法是將.audience放入,.audience-grouplike so，然後它變得更易於管理。

來源

2011-12-07 14:38:07

這也是工作，非常感謝@ liho1eye！ :) – Mico

單擊父級複選框時顯示子複選框

回答

相關問題