Показать / скрыть div в зависимости от значения слайдера пользовательского интерфейса jquery

Question

Я использую слайдер пользовательского интерфейса jQuery и пытаюсь показать 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

Я недавно сделал это для проекта, но мой показывал тег 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')

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

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