jquery单选按钮的值，当它悬停

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

我该如何处理？

插图

ROW1：radio1.1 radio1.2 radio1.3 打印值在这里收音机时无线电悬停

2行：radio2.1 radio2.2 radio2.3 打印值收音机在这里时收音机悬停

row3：radio3.1 radio3.2 radio3.3 print value radio in here w母鸡无线电悬停

我已经使用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>

来源

2012-04-13 Vicky Santoso

不要忘记将效果应用于“焦点”以及“悬停”，以使其能够使用键盘导航以及iPad /手机等触控设备。 – Beejamin 2012-04-13 05:32:30

$('.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-13 04:40:02

我owuld建议你切换到'开'而不是'活' – 2012-04-13 04:40:47

感谢您的回应.....但是当我徘徊，单选按钮的第二行，它显示第一行的值，我如何操作span元素为了显示第二行的值？ – 2012-04-13 04:44:13

，因为我从你的话了解，本次活动将在单选按钮

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

当单选按钮盘旋，然后把它的值与标签（下一个）打印。

来源

2012-04-13 04:49:56

是的..但无线电广播放置，标签在jquery ui buttonset – 2012-04-13 06:50:00

如果我悬停radio1.1，下一个元素将radio1.2不是跨度...并不会将该值显示为跨度 – 2012-04-13 06:57:30

可以实现无JavaScript的这种效果，仅使用HTML和CSS：

HTML

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

这需要在CSS content性能优势提取并显示应用元素的值至。您可能需要使用CSS来设置它的样式 - 我正在考虑相对于每一行的绝对定位。

这不适用于旧版本的IE。 8+肯定会奏效 - 我不确定7或更低。

来源

2012-04-13 05:31:28 Beejamin

jquery单选按钮的值，当它悬停

回答

相关问题