Question

希望以前没有问过这个滑块问题，但在浏览问题时我找不到答案。所以，这里是：我有一个SelectToUISlider（http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/），它基本上是一个修改过的JQuery UI Slider，我正在使用范围值。所以，我从60开始处理一个句柄，从100开始处理另一个句柄（从0到100）。我想要做的是单击一个单选按钮，以便100更改为0，并能够更改回100.我通过JQuery选择器/ javascript更改它是不成功的。但是，当更改选择以移动手柄时，这可以工作，但如果第二个手柄（在100处）在第一个手柄后面移动到0（在60），则范围似乎不会跟随。我想我可能必须破坏滑块并使用第二个句柄（以100开始）重建它在这种情况下成为0的第一个句柄（尽管我已经尝试销毁它并且它似乎没有响应这两个。）这是我迄今为止尝试过的不起作用的地方：

  <script type="text/javascript">
    {literal}
    $(function(){
      $('select').selectToUISlider({
        labels: 10
      });
    });
    function event_occurs(does) {
      if (does == 1) {
        $('.ui-slider').slider('option', 'values', [60,100]);
      }
      else {
        $('.ui-slider').slider('option', 'values', [0,60]);
      }
    }
  </script>
  <style type="text/css">
    form {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }
    fieldset { border:0; margin: 1em; height: 12em;}
    label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
    select {margin-right: 1em; float: left;}
    .ui-slider {clear: both; top: 5em;}
    .ui-slider-tooltip {white-space: nowrap;}
  </style>
    {/literal}
  <form action="#">
    <fieldset>
      <select name="valueA" id="my_estimate">
      {section name="estimates" loop=101}
        <option value="{$smarty.section.estimates.index}"{if $smarty.section.estimates.index == 60} selected{/if}>{$smarty.section.estimates.index}</option>
      {/section}
      </select>
      <select name="valueB" id="payout">
      {section name="estimates" loop=101}
        <option value="{$smarty.section.estimates.index}"{if $smarty.section.estimates.index == 100} selected{/if}>{$smarty.section.estimates.index}</option>
      {/section}
      </select>
    </fieldset>
  </form>

  <input type="radio" onclick="event_occurs(1)" name="Event" checked="checked"> Event Occurs<br />
  <input type="radio" onclick="event_occurs(0)" name="Event"> Event Does Not Occur

就像现在一样，单击单选按钮时没有任何反应，但我也没有收到任何Javascript错误。在我开始工作之后，我还想找到一些方法来通过更改滑块属性来禁用其中一个句柄。即将手柄留在其中但不允许它被拖动。非常感谢任何帮助。

Answer 1

为什么不用$（'ui-slider'）。remove（）。将其从DOM中删除，然后重新初始化它。我已经这样做了，它运行得非常快。

Answer 2

更新：我将event_occurs函数更改为以下内容：

    function event_occurs(does) {
  if (does == 1) {
    $('.ui-slider-scale').hide();
    $('.ui-slider').slider('destroy');
    $('#payout option:eq(100)').attr("selected","selected");
    $('select').selectToUISlider({
      labels: 10
    });
  }
  else {
    $('.ui-slider-scale').hide();
    $('.ui-slider').slider('destroy');
    $('#payout option:eq(0)').attr("selected","selected");
    $('#payout, #my_estimate').selectToUISlider({
      labels: 10
    });
  }
}

这很有效，但速度非常慢。如果我能做到这一点而不必破坏滑块将是一个明显的加分。任何帮助仍然受到赞赏。

JQuery SelectToUISlider问题

2 个答案: