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單選按鈕的值，當它懸停

回答

相關問題