javascript - 查找下一个div

This question already has answers here:

Jquery next not finding the next div?
                                
                                    （2个答案）
                                
                        
                                5年前关闭。
            
                    

<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

最佳答案

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

我认为这是一个更好的解决方案，因为它与标记无关。这意味着，如果您在控件周围移动，这仍将为您提供所需的.volume-control-container（只要它仍然是按钮的同级）。

更新资料

将volumeControl()函数放在$(document).ready()内或之前。