Question

我正在使用jQuery UI并将他们的＆＃39; Snap to Increments＆＃39;滑块，可在此处找到http://jqueryui.com/slider/#steps。

使用：每页创建多个幻灯片。当增量改变时，幻灯片上的图像将改变（对应于该分贝级别）。

问题：我让它工作，以便每个＆＃34;滑块＆＃34;我正在分开工作，但我努力让各个滑块的图像发生变化。例如，假设我在一个页面上有两个滑块。如果我滑动第一个滑块，第二个滑块的图像也会改变，但滑块本身不会在第二个滑块上移动。正如您将在下面的代码中看到的那样，我尝试使用$（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/。

============================================== < / p>

另外，你可以看到我试图在＆＃34; 10＆＃34;上使用$（this）。分贝水平，但这个和其他配置没有成功。

我仍然是jQuery的新手所以任何见解都会受到赞赏。感谢。

Answer 1

您的代码存在的问题是使用closest。 closest()仅查找父母，使用$('.slider').closest("")会返回 undefined或null 值，因为它无法获取元素。

而不是你可以使用

来获取当前div的前一个元素

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

这是Working Fiddle

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

使用jQuery的每个函数和$（this）来改变特定的幻灯片

1 个答案:

这是Working Fiddle