隱藏div是另一個div

我有一系列的<div class="clear-both"></div>後一系列divs。隱藏div是另一個div

我想要刪除任何<div class="clear-both"></div>，顯示該複選框出現的位置。

例如，

<input type="checkbox" value="male"> Male? 

<div class="clear-both"></div>

如果用戶檢查框，我想<div class="clear-both"></div>右下方它消失。

在頁面上有大約十幾個clear-both div實例。

我假設我必須爲每個複選框設置一個類，以偵聽用戶何時檢查該框，但我不確定如何刪除複選框下方的clear-both div。

任何幫助表示讚賞，謝謝。

來源

2012-06-22 Brad

$('input[type=checkbox]').on('click', function() { 
    $(this).next('div.clear-both').hide(); 
}):

來源

2012-06-22 19:12:16 xandercoded

我想刪除任何看起來複選框後，哪裏顯示。

您可以使用next()這樣的：

$('input[type=checkbox]').click(function(){ 
    $(this).next('div.clear-both').remove(); 
});

這將刪除點擊取其點擊複選框的下一個div元素。

更多：

http://api.jquery.com/next/

來源

2012-06-22 19:13:02 Blaster

雖然這是很容易做的，能與jQuery/JavaScript的，你也不要需要使用JavaScript; CSS可以用來代替（取決於您的跨瀏覽器的要求）：

.clear-both { 
    height: 1em; 
    background-color: #0f0; 
} 

input:checked + .clear-both { 
    background-color: #00f; 
}

JS Fiddle demo。

請注意，我使用變色只是因爲我不確定您希望.clear-both顯示/隱藏的狀態。顯然，根據您的需要調整風格。

爲了進一步闡明這種方法在跨瀏覽器兼容性方面的侷限性，根據Sitepoint，任何版本的Internet Explorer都不支持這種方法（儘管它們只列出了IE版本至8版本）。

但是Quirksmode clarifies that IE 9+ do/es支持:checked僞類。

來源

2012-06-22 19:19:16

使用next函數的兩個建議僅適用於下面的一個div。你說你想刪除所有的人，所以你應該看看nextAll功能：

http://api.jquery.com/nextAll/

來源

2012-06-22 19:20:09

如果你不想使用jQuery：

window.onload = function(){ 
    var elements = document.getElementsByTagName("input"); 
    for(var i=0;i<elements.length;i++) { 
    var element = elements[i]; 
    if(element.type == "checkbox") 
     element.onchange = function() { this.nextElementSibling.style.display = "none"; }; 
    } 
};

來源

2012-06-22 19:24:30

隱藏div是另一個div

回答

相關問題