Question

<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功能

$(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

Answer 1

您可以使用.siblings('.volume-control-container')查找距离最近的.volume-control-container。

我认为这是一个更好的解决方案，因为它是标记不可知的。这意味着如果你移动你的控件，这仍然会给你你想要的.volume-control-container（只要它仍然是你的按钮的兄弟）。

<强>更新

将volumeControl()功能放在$(document).ready()内或之前。

Answer 2

您可以获得最接近的下一个元素。从你的代码中，这将为你提供具有volume-control-container类的div。

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

Answer 3

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

这是一个jsFiddle示例

寻找下一个div

3 个答案: