Question

当我尝试显示滑块的值时，它不起作用？

<div class="hoogte hoogte2">
  <label for="kpa2_rating_value">Rating 2:</label>
  <div id="2" class="slider2" style="margin-bottom: 10px; margin-top: 10px;"></div>
  €<input id="productprijs" type="text" class="kpa2_rating_value" name="kpa2_rating" value="0" style="border: none;" />
</div>

$(".slider2").slider({
  change: function( event, ui ) {
    $("#dom_element").text(value);
  }
});

Answer 1

您定义的函数没有value变量。假设您要从滑块控件中检索值，则需要使用ui.value，如下所示：

$(".slider2").slider({
  change: function(event, ui) {
    $("#dom_element").text(ui.value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />

<div class="hoogte hoogte2">
  <label for="kpa2_rating_value">Rating 2:</label>
  <div id="2" class="slider2" style="margin-bottom:10px; margin-top: 10px;"></div>
  €<input id="productprijs" type="text" class="kpa2_rating_value" name="kpa2_rating" value="0" style="border:none;" />
</div>
This is the script to show the value in an paragraph called
<p id="dom_element"><p>

Answer 2

您的问题在这一行：

$("#dom_element").text(value);

将其更改为：

$("#productprijs").val(ui.value);

在您的情况下， dom_element 是 productprijs ，对于此元素，您需要使用val而不是text方法。

此外，您可以使用slide( event, ui )代替更改事件。

＆＃13;

$( ".slider2" ).slider({
    slide: function( event, ui ) {
        $("#productprijs").val(ui.value);
    }
});

＆＃13;

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="hoogte hoogte2">
    <label for="kpa2_rating_value">Rating 2:</label>
    <div id="2" class="slider2" style="margin-bottom:10px; margin-top: 10px;"></div>
    €<input id="productprijs" type="text" class="kpa2_rating_value" name="kpa2_rating" value="0" style="border:none;" />
</div>

＆＃13;

无法显示jquery ui滑块的值

2 个答案: