0

我一直在尝试遵循此处的示例：使用 JQuery UI 将单选按钮转换为滑块元素

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

这是我的代码：

<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>

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

4

1 回答 1

1

你有几个问题：

错误的选择器

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

没有参考 jQuery UI

该.slider方法在 'vanilla' jQuery 中不可用，您必须参考 jQuery UI

JS 代码的“位置”错误

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

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

<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>

​
于 2012-05-14T15:12:46.063 回答