Показать/скрыть div на основе значения jquery UI slider

Question

Я использую слайдер jQuery UI и пытаюсь показать 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'); 
        } 
       } 
      }); 

так что вы должны быть в состоянии просто использовать, но изменить эти necesary атрибуты, то есть значение и селекторы и т.д.

Edit - обновленный ответ следует

получил его, 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') 

вам нужно изменить это как бы вы хотели, чтобы событие было запущено.

Надеюсь, что это поможет :)