向/从由子元素事件触发的表格单元格添加/删除类

Question

我正在使用 jQuery 1.4。每次选中 "<td>" 内的单选按钮时，我都会尝试突出显示表的 <td> 标记，如果未选中，则删除突出显示类。

这是标记：

CSS： .highlight-blue { 背景色：#81BEF7; }

<table id="tblContainer">

        <tr>
            <td>
                <input type="radio" name="book" value="book1" /> Book 1</td>
            <td>
                <input type="radio" name="book" value="book2" /> Book 2</td>
            <td>
                <input type="radio" name="book" value="book3" /> Book 3</td>
                            <td>
                <input type="radio" name="book" value="book4" /> Book 4</td>
     </tr>
</table>

Javascript：

// highlight checked radion button
            $('#tblContainer :radio').click(function() {

            //add class to hilghlight selected radio button
            var cell = $(this).closest('td');
                if ($(this).is(':checked')) {
                    cell.addClass('highlight-blue');
                }
                else {
                //remove highlight class
                    cell.removeClass('highlight-blue');
                }

            });

问题在于它不会从先前选择的单选按钮中删除该类。

更新 1： 在此处查看新的更新标记http://jsbin.com/egusud/7

Answer 1

是的，您会想要上升到行级别（如果单选按钮只是在行中彼此相关）或表级别（如果它们跨行彼此相关）。

假设仅在行内 (live example)：

$('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove highlight
    $this.closest("tr").find("td.highlight-blue").removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue");
});

请注意，如果单选按钮被选中，您只会点击它，因此无需检查。

---

题外话：如果您添加labels (live copy)，人们会更容易点击这些单选按钮：

<label><input type="radio" name="book" value="book1"> Book 1</label>

如果是这样，您可能希望将此 CSS 样式添加到标签 (live copy)：

label {
    cursor: pointer;
}

...使它们更容易被点击。

---

更新：从 cmets 看来，您的单选按钮彼此位于不同的行中，并且您还混有其他单选按钮，如下所示：

<table id="tblContainer">
  <thead>
    <tr>
      <th>Books</th>
      <th>Magazines</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book1"> Book 1</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine1"> Magazine 1</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book2"> Book 2</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine2"> Magazine 2</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book3"> Book 3</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine3"> Magazine 3</label>
      </td>
    </tr>
  </tbody>
</table> 

在这种情况下，要从旧的类中删除该类，您只需找到具有相同名称的其他单选按钮，然后找到具有该类的父单元格 (live copy)：

jQuery(function($) {

  $('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove highlight from cells containing
    // radio buttons with this same name
    $this
      .closest("table")
      .find('input:radio[name="' + this.name + '"]')
      .closest("td.highlight-blue")
      .removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue");
  });

});

或者，“标记类”方法（这里我使用了“rb-”加上单选按钮的名称，但您需要确保单选按钮名称对类名有效）（live copy ):

jQuery(function($) {

  $('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove previous highlight if any
    $("td.highlight-blue.rb-" + this.name).removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue rb-" + this.name);
  });

});