Question

我一直在尝试按照此处的示例：Using JQuery UI to convert radio buttons into slider elements

我试图重新创建样本，但它似乎对我不起作用。我所看到的只是单选按钮。

这是我的代码：

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> Test </title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">

$(".question").each(function() {
    var radios = $(this).find(":radio").hide();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }
    }).appendTo(this);
});
    </script>

</head>
<body>

<div id="question">
  <h2>How long is your hair?</h2>
  <label><input type="radio" name="71" value="98">Short</label>
  <label><input type="radio" name="71" value="99">Medium</label>
  <label><input type="radio" name="71" value="100">Long</label>
</div>

</body>
</html>

谁能告诉我我做错了什么？

Answer 1

你有一些问题：

错误的选择器

您的选择器应为$('#question')，因为question是div的ID，而不是类。 $('.question')用于选择question类中的元素。您可以更改选择器，也可以将元素更改为<div class="question">。

没有对jQuery UI的引用

'vanilla'jQuery中没有.slider方法，你必须引用jQuery UI

JS代码错误的“地方”

JS代码在重新构建元素之前执行。您应该将现有代码嵌入$(document).ready调用中。这里有更多here。

完成所有更改后，您的代码应如下所示：

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css"/>

  <style type='text/css'>
    label { display: block; float: left; text-align: center; width: 33%; }
    .question > div { clear: left; }

  </style>


<script type='text/javascript'>
$(function(){
$(".question").each(function() {
    var radios = $(this).find(":radio").hide();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }
    }).appendTo(this);
});

$("button").click(function() {
    alert($(":radio[name=71]:checked").val());
});

});

</script>


</head>
<body>
  <div class="question">
    <h2>How long is your hair?</h2>
    <label><input type="radio" name="71" value="98">Short</label>
    <label><input type="radio" name="71" value="99">Medium</label>
    <label><input type="radio" name="71" value="100">Long</label>
</div>

</body>


</html>

JQuery Slider单选按钮没有出现

1 个答案:

错误的选择器

没有对jQuery UI的引用

JS代码错误的“地方”