Question

我想使用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>

Answer 1

无需绑定和取消绑定，只需使用活动类来确定悬停行为：

$("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>

Fiddler：http://jsfiddle.net/Bc2DN/2/

Answer 2

如果没有实例，很难弄清楚所有奇怪的颜色和绑定/解除绑定，但我猜这样的事情：

$(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", "");
        }
    });

Answer 3

你们怎么样？

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

并将活动类绑定到单选按钮的例如：

$("input[type='radio']").click(function(
    $(this).parentsUntil("tr").parent().addClass("active")
    $(this).parentsUntil("tr").parent().siblings().removeClass("active");
));

想使用Bind和Unbind。我希望能够在选择单选按钮后将鼠标悬停在其他行上

3 个答案: