Javascript 基于jquery UI滑块的值显示/隐藏div_Javascript_Jquery_Jquery Ui

Javascript 基于jquery UI滑块的值显示/隐藏div

javascript jquery jquery-ui

Javascript 基于jquery UI滑块的值显示/隐藏div,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在使用jQueryUI滑块，并试图在滑块点击某个值时显示div，否则将其隐藏。div正在显示/隐藏，但出现在意外时刻。有人能发现我的语法哪里出了问题吗？以下是脚本： $(function() { //vars var conveyor = $(".content-conveyor", $("#sliderContent")), item = $(".item", $("#sliderContent")); //set length of conveyo

我正在使用jQueryUI滑块，并试图在滑块点击某个值时显示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"));

  });

我最近为一个项目做了这项工作，但我的工作是向用户显示一个span标记作为警告，下面是我使用的代码，它工作正常：

            $("#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')

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

希望这有帮助：）

我最近为一个项目做了这项工作，但我的项目向用户显示了一个span标记作为警告，以下是我使用的代码，其效果良好：

            $("#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');
                    }
                }
            });