Question

我想使用Jquery UI Slider追加并删除随机文本到div。它应该通过在一个方向上移动滑块手柄来添加文本，同时在另一个方向上移除文本。我读了API，但是找不到有关方向事件的信息。

var rhetoric = ["lorem", "ipsum", "consectetur", "adipiscing"];
$(document).ready(function() {
  $('#slider-vertical').slider({
    orientation: "vertical",
    min: 0,
    max: rhetoric.length - 1,
    step: 1,
    value: 3,
    slide: function(event, ui) {
      $("#ipsum-text").append(rhetoric[ui.value] + " ");
    }
  });
  $("#ipsum-text").val($("#slider-vertical").slider("value", 0));
});

jsFiddle Example

Answer 1

我明白了！我合并了solution from another thread。基本上，您需要使用值更改来触发文本添加或删除。完整代码如下：

var rhetoric = ["lorem", "ipsum", "consectetur", "adipiscing"];
var last = 0;

$(document).ready(function() {
  $('#slider-vertical').slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: rhetoric.length,
    step: 1,
    value: rhetoric.length + 1,
    slide: function(event, ui) {
      if (ui.value < last) $("#ipsum-text").append('<span class="ipsum-item">' + rhetoric[ui.value] + '</span>&nbsp;');
      if (ui.value > last) $(".ipsum-item:last-child").remove();
      last = ui.value;
    }
  });
  $("#ipsum-text").val($("#slider-vertical").slider("value"));
});

使用Jquery UI Slider追加/删除文本

1 个答案: