javascript - 无法显示 jquery ui slider 的值

Question

当我尝试显示 slider 的值时它不起作用？

<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 的 slider 控件中检索值，如下所示:

$(".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>