1

希望这以前没有被问过，只是一个滑块问题，但是当我已经浏览问题时找不到答案。所以，这里是：我有一个 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 处）移动到第一个句柄（在 60 处）后面的 0，则范围似乎不跟随。我想我可能不得不破坏滑块并用第二个句柄（从 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 错误。完成这项工作后，我还想找到一些方法来通过更改滑块属性来禁用其中一个句柄。即，将手柄留在其所在位置，但不允许拖动它。任何帮助是极大的赞赏。

4

2 回答 2

2

为什么不直接使用 $('ui-slider').remove()。从 DOM 中删除它，然后重新初始化它。我已经这样做了，它运行得非常快。

于 2010-07-14T18:24:17.423 回答
0

更新：我将 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
    });
  }
}

这有效，但非常非常慢。如果我可以在不破坏滑块的情况下做到这一点，那将是一个明显的优势。任何帮助仍然很感激。

于 2009-10-16T15:42:26.207 回答