1

Bind と Unbind Please を使いたいです。複数の行を持つテーブルがあります。各行にラジオボタンがあります。HTML を実行すると、各行にカーソルを合わせると、各行が水色に変わります。ラジオ ボタンを選択すると、選択していない他の行にカーソルを合わせることができなくなります。私を助けてください

    <table id ="myTable">
 <tr>
<th>Selected</th>
<th>First Name</th>
<th>Middle Name</th>
<th style="width: 10%;">Last Name</th>
<th>Active Email</th>


       <tr>
    <td><input class ="rad" type="radio" name="developerRadio" value="Value 1" /></td>
    <td>Hello</td>
    <td>everyone</td>
    <td>good</td>
    <td>email</td>
    <td>hello</td>

 </tr>
           <tr>
    <td><input class ="rad" type="radio" name="developerRadio" value="Value 1" /></td>
    <td>Hello</td>
    <td>everyone</td>
    <td>good</td>
    <td>email</td>
    <td>hello</td>

 </tr>
        <tr>
    <td><input class ="rad" type="radio" name="developerRadio" value="Value 1" /></td>
    <td>Hello</td>
    <td>everyone</td>
    <td>good</td>
    <td>email</td>
    <td>hello</td>

 </tr>




<script>
$(document).ready(function () {
    $("tr").mouseover(function () {
        $(this).css("background-color", "#0066FF");
    });
    $("tr").mouseout(function () {
        $(this).css("background-color", "");
    });

    $('input:radio').click(function () {
        $("tr").unbind("mouseover mouseout");
        $(this)
            .closest('tr')
                .siblings()
                .css('background-color', 'white')
                .end()
            .css('background-color', 'darkblue');
        $("input:radio")
            .unbind("click")
            .click(function () {
                $('tr').bind("mouseover");
                $(this).closest('tr').css('background-color', "#0066FF");
        });
    });
});
</script>
4

3 に答える 3

2

バインドおよびアンバインドする必要はありません。アクティブ クラスを使用してホバー動作を決定するだけです。

$("table")
  .on("mouseenter mouseleave", "tr:not(.selected)", function(e){
    $(this).toggleClass("hovered", e.type === "mouseenter"); })
  .on("click", "input:radio", function(){
    $(this).closest("tr").addClass("selected"); });​

フィドル: http://jsfiddle.net/Bc2DN/1/

または、主に CSS に依存して、物事を単純にすることもできます。

<style>
  tr:hover { background: yellow }
  tr.selected { background: orange }
</style>

<script>
  $("input:radio").on("click", function(){
     $(this).closest("tr").addClass("selected"); 
  });
</script>

フィドラー: http://jsfiddle.net/Bc2DN/2/

于 2012-05-21T22:21:12.143 に答える
1

あなたがたは古いCSSはどうですか？

tr {background: transparent;}
tr:hover {background: #0066FF;}
tr.active {background: lightgoldenrod;}
tr.active:hover {background: yellow;}

アクティブなクラスをラジオボタンのtrにバインドします。例：

$("input[type='radio']").click(function(
    $(this).parentsUntil("tr").parent().addClass("active")
    $(this).parentsUntil("tr").parent().siblings().removeClass("active");
));
于 2012-05-21T22:28:07.413 に答える
1

実際の例がなければ、すべての奇妙な色とバインディング/アンバインディングを理解するのは難しいですが、私は次のようなものを推測しています:

$(document).ready(function () {
    $("tr").on({
        mouseover: function () {
            if (!$(this).find('input:radio').prop('checked')) {
                $(this).css("background-color", "#0066FF");
            }
        },
        mouseout: function () {
            $(this).css("background-color", "");
        }
    });
于 2012-05-21T22:15:58.090 に答える