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

Question

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

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

问题：我让它工作，所以每个 "slider" 都是单独工作的，但是我正在努力为单个滑块更改图像。例如，假设我在一页上有两个滑块。如果我滑动第一个滑块，第二个滑块的图像也会改变，但滑块本身不会在第二个滑块上移动。正如您将在下面的代码中看到的那样，我正在尝试使用 $(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("") 将 return 您 undefined 或 null 值，因为它无法获取元素。

您可以使用

提取当前 div 的前一个元素，而不是它

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

这里是 Working Fiddle

对不起，我不善于解释，但我希望这对你有所帮助。