使用jQuery每个函数和$(this)来更改特定的幻灯片

Question

我正在使用jQuery UI，并复制他们的‘到增量’滑块，这可以在这里找到http://jqueryui.com/slider/#steps。

使用：每页创建多个幻灯片。当增量被更改时，幻灯片上的图像将发生变化(对应于分贝级别)。

however ：我让它工作，这样每个“滑块”都可以单独工作，但是我很难让单个滑块的图像改变。例如，假设我在一页上有两个滑块。如果我滑动第一个滑块，第二个滑块的图像也会改变，但是滑块本身不会在第二个滑块上移动。正如您在下面的代码中所看到的，我试图使用$(this)来确保只使用正在使用的滑块响应。

这是我的jQuery代码：

$(function() {
    // $( ".slider" ).slider({
    $( ".slider" ).each(function(){
        $(this).slider({
        value:10,
        min: 10,
        max: 80,
        step: 10,
        animate: true,
        animate: "slow",
        slide: function( event, ui ) {
            // line below: hides div that was previously selected from slide bar
            $('.decibelCtr > div').hide();
            switch(ui.value) {
                case 10:
                    // $('.decibel10').show();
                    $(this).closest('decibelCtr').children('.decibel10').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 20:
                    $('.decibel20').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 30:
                    $('.decibel30').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 40:
                    $('.decibel40').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 50:
                    $('.decibel50').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 60:
                    $('.decibel60').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 70:
                    $('.decibel70').show();
                    break;
                // etc
            }
            switch(ui.value) {
                case 80:
                    $('.decibel80').show();
                    break;
                // etc
            }
        }
        });
    });
});

我创建了一个JSFiddle，其中包含一些与这段代码相对应的HTML。在这里发现：http://jsfiddle.net/ccm9n9fz/。

==============================================

另外，您可以看到，我试图在"10“分贝级别上使用$( this )，但是在这个配置和其他配置上没有成功。

我仍然是jQuery的新手，所以任何的洞察力都会很感激。谢谢。

Answer 1

代码的问题在于closest的使用。closest()只查找父元素，使用$('.slider').closest("")将返回未定义的或空的值，因为它无法获取元素。

可以使用以下方法提取当前div的前一个元素，

$(this).prev(".decibelCtr").find('.decibel10').show();
        ^^ Gets Previous element with specified class 

这是工频

对不起，我不擅长解释，但我希望这会对你有所帮助。