javascript - 根据 jquery UI slider 的值显示/隐藏 div

Question

我正在使用 jQuery UI slider ，并尝试在 slider 达到某个值时显示 div，否则隐藏它。 div 正在显示/隐藏，但在意想不到的时刻。有人能发现我的语法哪里出了问题吗？这是脚本:

  $(function() {

    //vars
    var conveyor = $(".content-conveyor", $("#sliderContent")),
    item = $(".item", $("#sliderContent"));

    //set length of conveyor
    conveyor.css("width", item.length * parseInt(item.css("width")));

    //config
    var sliderOpts = {
      max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),orientation: "vertical",range: "min",step: 304,
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
        $("#amount").val('$' + ui.value);

        // here's where I'm trying to show and hide a div based on the value of the slider
        if ($("#slider").slider("value") == 304) {
        $("#test").show();
        } else  {
         $("#test").hide();    
        }
      }
    };

    //create slider
    $("#slider").slider(sliderOpts);
    $("#amount").val('$' + $("#slider").slider("value"));

  });

Answer 1

我最近为一个项目做了这个，但我的项目显示了一个跨度标签作为对用户的警告注释，以下是我使用的代码，它工作正常:

            $("#slider").slider({
                animate: true,
                min: 0,
                max: 10000,
                range: true,
                slide: function(event, ui) {
                    $("#amount").val(ui.values[1]);
                    if (ui.values[1] > '2000') { //2000 is the amount where you want the event to trigger
                        $('.slider-warning').css('display', 'block');
                    } else {
                        $('.slider-warning').css('display', 'none');
                    }
                }
            });

所以你应该能够只使用它，但更改必要的属性，即值和选择器等。

编辑 - 更新后的答案如下

明白了，ui.values 是错误的，请在下面找到更正后的代码

var sliderOpts = {
          max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
          orientation: "vertical",
          range: "min",
          step: 304,
          slide: function(event, ui) {
              conveyor.css("left", "-" + ui.value + "px");
              $("#amount").val('$' + ui.value);
              if (ui.value > '200') { //200 is the amount where you want the event to trigger
                  $('#test').css('display', 'block');
              } else {
                  $('#test').css('display', 'none');
              }
          }
        };

这是直接取自您的代码，另请注意:

if (ui.value > '200')

您需要将其更改为您希望触发事件的方式。

希望这有帮助:)