0

我有 10 个来自 jquery 的单选按钮/按钮集。当然，每个按钮都有自己的值，当按钮悬停时，我想在按钮旁边显示值。

我该如何处理？

插图

row1 ：radio1.1 radio1.2 radio1.3在radio悬停时在此处打印值radio

row2 ：radio2.1 radio2.2 radio2.3在radio悬停时在此处打印值radio

row3 ：radio3.1 radio3.2 radio3.3在radio悬停时在此处打印值radio

我已经使用live functionjquery 来获取事件鼠标悬停，但是如何将值具体放置到特定行中？

我怎样才能得到哪个收音机被过度使用，所以我可以得到它的价值？

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

你可以在没有 javascript 的情况下实现这个效果，只使用 HTML 和 CSS：

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 
$('.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 回答
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 回答