0

jqueryのラジオボタン/ボタンセットが10個あります。もちろん、すべてのボタンには独自の値があり、ボタンをホバーしたときにボタンの横に値を表示したいと考えています。

どうすれば対処できますか？

図

row1 : radio1.1 radio1.2 radio1.3ラジオがホバーされたときにここにラジオの値を出力します

行 2 : radio2.1 radio2.2 radio2.3値 radio in here をラジオの上に置いたときに出力します

行 3 : radio3.1 radio3.2 radio3.3ラジオがホバーされたときに値 radio in here を出力します

イベントのマウスオーバーを取得するために jquery を使用live functionしましたが、値を特定の行に特定の場所に配置するにはどうすればよいですか?

どのラジオがオーバーしているかを取得するにはどうすればよいですか?その値を取得できますか?

<!DOCTYPE html>
    <html>
    <head>
        <link href="jslib/jquery_theme/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
      <script src="jslib/jquery-1.7.1.min.js"></script>
      <script src="jslib/jquery-ui-1.8.18.custom.min.js"></script>

      <script>
      $(document).ready(function() {
        $(".ter").buttonset();
      });



      $('.ter > label').live('mouseover mouseout', function(event) {
      if (event.type == 'mouseover') {
        document.getElementById('mydiv').innerHTML = "Hello World";
      //this is when radio is hovered, it should show radio value beside the rwadio
      } else {
         document.getElementById('mydiv').innerHTML = "out";
         //this is when mouse is out from radio
      }
});

$(function() {
    $("#radio :radio").change(function(e) {
       alert(
           "run ok"
       );
    });
});



  </script>


</head>
<body style="font-size:62.5%;">

<div id="radio">
    <form name='tes' method='post' action='a.php'>
    <?php for($I=0;$I<10;$I++){ 

        echo"
        <div class='ter' style='border:1px solid; width:400px; margin-bottom:5px;'>

    <input type='radio' id='radio1.$I' name='radio.$I' value='4' /><label for='radio1.$I'>  </label>
    <input type='radio' id='radio2.$I' name='radio.$I' checked='checked' value='3' /><label for='radio2.$I'> </label>
    <input type='radio' id='radio3.$I' name='radio.$I' value='2' /><label for='radio3.$I'> </label>
        <input type='radio' id='radio4.$I' name='radio.$I' value='1'/><label for='radio4.$I'> </label>
        <span id='mydiv'>aaaaaaaaaa</span> 
        </div>  ";
         } ?>
        <div class='ter'>
        <input type='submit' value ='submit'>
        </div>
    </form> 

</div>

</body>
</html>
4

3 に答える 3

0

HTMLとCSSのみを使用して、JavaScriptなしでこの効果を実現できます。

HTML

​&lt;form>
   <label><input type="radio" name="Test" value="Something"/></label>
   <label><input type="radio" name="Test" value="Something else"/></label>
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

input:hover:after,
input:focus:after {
    content: attr(value);
    padding-left: 2em;
}​

これは、CSScontentプロパティを利用して、適用されている要素の値を抽出して表示します。CSSを使用して、希望どおりにスタイルを設定する必要がある場合があります。各行に対する絶対的な配置を考えています。

これは、古いバージョンのIEでは機能しません。8+は間違いなく機能します-7以下についてはよくわかりません。

于 2012-04-13T05:31:28.440 に答える
0

あなたの言葉からわかるように、イベントはラジオボタンで行われます

$('input[type=radio]').live({
   mouseover:function(){
      var value = $(this).attr('value');
      $(this).next().html(value);
   },
   mouseout:function(){
      $(this).next().html("");
   }
});

ラジオボタンがホバーされると、その値を取得してラベルに出力します（次へ）。

于 2012-04-13T04:49:56.560 に答える
0 
$('.ter > label').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    document.getElementById('mydiv').innerHTML = $("#"+$(this).attr("for")).val();
  //this is when radio is hovered, it should show radio value beside the rwadio
  } else {
     document.getElementById('mydiv').innerHTML = "";
     //this is when mouse is out from radio
  }

これにより、ラベルに対応するラジオ値が配置され、それに応じて div を配置できるようになります。

于 2012-04-13T04:40:02.957 に答える