Jquery UI 最初隐藏滑块句柄

Question

我已经用 jquery ui 设置了一个滑块。我希望滑块的句柄最初是隐藏的，并且仅在用户单击滑块后才显示出来。我设法通过在 ui-slider-handle 类中将 display 设置为 none 来隐藏句柄。但是，我以后无法将其更改回来。

Answer 1

考虑以下代码 sn-p，基于 https://api.jqueryui.com/slider/ 示例。

$(function() {
  $("#slider").slider({
    start: function() {
      $(".ui-slider-handle", this).show();
    }
  });
  var sw = $("#slider").slider("widget");
  $(".ui-slider-handle", sw).hide();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

是的，你可以用 CSS 隐藏句柄，让它再次出现就意味着在 CSS 上使用元素样式：

$(".ui-slider-handle").css("display", "block");

上面的例子更具体一些，但本质上是做同样的事情。初始化 Slider 后，您可以调用 widget 方法来访问各种元素。我们可以在句柄上使用.hide()。当用户点击 Slider 时，会触发 start 事件，此时我们可以 .show() 处理。

如果您有多个滑块，ui-slider-handle 类可能过于模糊，因此使用选择器上下文会有所帮助。

在内部，选择器上下文是用.find()方法实现的，所以$( "span", this )等价于$( this ).find( "span" )。

查看更多：

• https://api.jqueryui.com/slider/#method-widget
• https://api.jqueryui.com/slider/#event-start
• https://api.jquery.com/show/
• https://api.jquery.com/hide/
• https://api.jquery.com/jquery/#selector-context