Question

我的目标是要有一个滑块，在该滑块上滑动会更改信息文本。

不幸的是，jQuery移动文档仅显示数字值：http://demos.jquerymobile.com/1.4.5/slider/

此刻我正在使用选择字段：

<select name="condition" id="filter_condition"> 
    <option value="18">Average</option> 
    <option value="13">Good</option>
    <option value="277">Bad</option>
</select>

在此示例中，值不是1-3且顺序不正确。

我不想显示选择字段，而是要显示一个滑块，其中左侧为坏，右侧为好。

使用jQuery mobile可能吗？我只发现了带有数字值的示例。

Answer 1

无法完全理解为什么不对您的值进行排序，但是无论如何，这是我的建议。

如果这不是您所期望的，请随意更新更多问题。

在您的示例中，您只需要创建与您的选项相对应的三个滑块扇区，以及显然与它们之间的关系即可。使用cases[val].value过滤掉您需要的内容。 input.change事件是您的朋友在这里。

$(document).on("pagecreate", "#page-one", function() {
  var cases = [{value:277, label:"bad"},{value:18, label:"average"},{value:13, label:"good"}];
  $(".full-width-slider input").on("change", function() {
    var val = ($(this).val()/100)|0;
    $(".full-width-slider h3").text(cases[val].label);
  });
});

/* Hide the number input */
.full-width-slider input {
  display: none !important;
}
.full-width-slider .ui-slider-track {
  margin-left: 15px;
}

.full-width-slider h3 {
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <div class="full-width-slider">
        <h3 class="ui-bar ui-bar-a ui-corner-all">bad</h3>
        <input type="range" min="0" max="299" value="0" autocomplete="off" />
      </div>
    </div>
  </div>
</body>
</html>

这是有关slider事件的另一个示例：https://stackoverflow.com/a/44519349/4845566

如何使用jQuery滑块显示文本值？

1 个答案: