Question

我想用单选按钮创建一个表将鼠标悬停在该行上时，表格行会突出显示。（'悬停'类已应用）单击行更改时，将检查包含的选项按钮并更改背景颜色（应用“活动”类）。

到目前为止一直很好，除了活动类仅在直接单击无线电而不是行时应用。并且活动类不会删除。

HTML

<form action="paypal-size-guide.html" method="" accept-charset="utf-8">
<table id="sizeOptions">
<thead>File Size</thead>
    <tr>
        <td><input type="radio" name="size" value="Large" checked="true"> Large</option></td>
        <td>3000 x 2000px</td>
        <td>&pound;20</td>
    </tr>
    <tr>
        <td><input type="radio" name="size" value="Medium" > Medium</option></td>
        <td>1500 x 1000px</td>
        <td>&pound;15</td>
    </tr>
    <tr>
        <td><input type="radio" name="size" value="Small" > Small</option></td>
        <td>750 x 500px</td>        
        <td>&pound;10</td>
    </tr>
</table>
</form>

JS

$('#sizeOptions tr').click(function() {
    $(this).find('td input:radio').prop('checked', true);
});

$('#sizeOptions tr td input:radio').click(function() {
    if($(this).is(':checked')) {
        $(this).closest('tr').addClass("active");
    } else {
        $(this).closest('tr').removeClass("active");
    }
});

$('#sizeOptions tr').mouseover(function() {
$(this).addClass("hover");
});

$('#sizeOptions tr').mouseout(function() {
$(this).removeClass("hover");
});

CSS

#sizeOptions {
    border-collapse: collapse;
    padding: 10px;
}

#sizeOptions td {
    padding: 10px;
}

#sizeOptions tr {
    border-bottom: solid 1px #b1b1b1;
}

Answer 1

你有几件事情导致了你的问题。

首先，您已经有一个点击该行的处理程序。如果您希望单击单选按钮和行都可以工作，则只需要行处理程序，因为对该按钮的任何单击也会传播到该行。

按钮上的点击处理程序仅适用于按钮的实际点击，而不是当您使用jQuery设置按钮状态时，除非您以编程方式调用.click()。

单击一个单选按钮永远不会被取消选择，只能通过单击另一个单选按钮。因此，您的代码永远不会删除活动类。相反，只需从所有行中删除活动类，然后将其应用回已单击的行。它还简化了你的代码。

此外，如果您重新排列css定义的顺序，您的活动状态将在您单击时立即显示，这是一个更好的UI，因为有对用户的反馈。或者你可以有一个.active.hover课程。无论哪种方式，用户都可以轻松地告诉他们点击了它们。

代码：

$('#sizeOptions tr').click(function () {
    $(this).find('td input:radio').prop('checked', true);
    $('#sizeOptions tr').removeClass("active");
    $(this).addClass("active");
});

演示：http://jsfiddle.net/yNWSY/

检查更改行背景颜色id无线电的jquery

1 个答案: