尋找下一個DIV

<button class="volumen-btn" onclick="niceFunction()> 
<i class="fa fa-volume-up"></i> 
</button> 
<div class="volume-control-container" id="container1" style="display:none;"> 
<input type="range" name="blabla" class="volume-range" id="range1"> 
</div> 
<div class="randomdiv"> 
</div> 

<!-- New Volume Button --> 

<button class="volumen-btn" onclick="niceFunction()> 
<i class="fa fa-volume-up"></i> 
</button> 
<div class="volume-control-container" id="container1" style="display:none;"> 
<input type="range" name="blabla" class="volume-range" id="range1"> 
</div>

JS功能尋找下一個DIV

$(document).ready(function() { 

    $(".volume-btn").click(function() { 
     volumeControl(); 
    }); 
}); 


function volumeControl(){ 
    $(this).siblings('.volume-control-container').toggle() 
}

隨着JS我想點擊volume-btn，然後找到最接近的volume-control-container和切換其顯示。我已經檢查過類似/重複的問題，但無法讓它適用於我的具體問題。

的jsfiddle鏈接：http://jsfiddle.net/eltonfrederik/4Pa4g/1

來源

2014-05-16 Elton

我剛剛添加了我的JS嘗試 – Elton

你還可以發佈你的事件監聽器 – Martin

您可以使用.siblings('.volume-control-container')找到最接近.volume-control-container。

我認爲這是一個更好的解決方案，因爲它是標記不可知的。這意味着如果你移動你的控件，這仍然會給你想要的.volume-control-container（只要它仍然是你的按鈕的兄弟）。

更新

把你volumeControl()功能您$(document).ready()內或之前。

來源

2014-05-16 15:48:56 Martin

再次感謝馬丁。 – Elton

你可以得到這樣的最接近的下一個元素。從你的代碼中可以得到具有音量控制容器類的div。

$(".volumen-btn").next();

來源

2014-05-16 15:18:32

$(".volumen-btn").next().toggle();

這裏有一個例子jsFiddle

來源

2014-05-16 15:28:50

嘿，你能幫我調試爲什麼這個解決方案沒有爲我工作，在聊天？ – Elton

尋找下一個DIV

回答

相關問題