JQuery滑块单选按钮不出现答案

【问题标题】：JQuery Slider Radio Button Not AppearingJQuery滑块单选按钮不出现
【发布时间】：2012-05-14 14:34:07
【问题描述】：

我一直在尝试遵循这里的示例：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>

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

【问题讨论】：

您的代码似乎没有引用 jQuery UI 库。

标签： jquery jquery-ui

【解决方案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>

【讨论】：

很高兴为您提供帮助。不要忘记投票/接受对您有帮助的答案