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

いくつかの問題があります。

間違ったセレクター

あなたのセレクターは、クラスではなくのIDである$('#question')ためです。クラス内の要素を選択するためのものです。セレクターを変更するか、要素を に変更します。questiondiv$('.question')question<div class="question">

jQuery UI への参照なし

この.sliderメソッドは「バニラ」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 に答える