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

如果没有现场示例，很难弄清楚所有奇怪的颜色内容和绑定/解除绑定，但我猜是这样的：

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