在jQuery中改变输入滑块值的目标

Question

我正在使用JQuery简单滑块将一个文本框转换为滑块。

它包括以下脚本

1. 在DOM和
的位置后添加<span class="output"></span>
2. 当span发生变化时，将该值绑定到span。

在这里:

  <script>
  $("[data-slider]")
    .each(function () {
      var input = $(this);
      $("<span>")
        .addClass("output")
        .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
      var value = $(this)
        .nextAll(".output:first")
          .html(data.value.toFixed(3));
    });
  </script>

我想修改这个，这样它就不会创建一个<span>元素，并在页面的其他地方显示结果。

所以，我想把它改成像下面这样的东西，但是这行不通!

  <script>
  $("[data-slider]")
    .each(function () {
      var input = $(this);
    })
    .bind("slider:ready slider:changed", function (event, data) {
      var value = $(this);
        $(".displayMyValue").html(data.value.toFixed(3));
    });
  </script>

我能把。nextall改成更合适的吗?

我的HTML:

<span class="displayMyValue"></span>
<input id="my-input" type="text" value="" data-slider="true" data-slider-range="1000,100000" data-slider-step="100" data-slider-highlight="true" data-slider-theme="volume">
<span class="output">//this created by jQuery//</span>

Answer 1

我使用以下代码:

$("[data-slider]").bind("slider:ready slider:changed", function (event, data) {
     $(this).next("span").html(data.value.toFixed(0));
});

bind函数查找用于显示数据的Next span。

将span更改为#IdSpan，它将找到具有定义ID的span。