javascript - 独立函数的 jQuery 背景颜色变化

Question

Stripped down working jsfiddle

如果复选框被选中，我会突出显示行。它在一张 table 上工作，但出于某种原因我不明白为什么它在另一张 table 上不一样。所有其他功能正是我想要的。

$(document).ready(function() {

  $('#myteam').on('change', '[type=checkbox]', function() {
    var $this = $(this);
    var row = $this.closest('tr');
    if ($this.prop('checked')) { // move to top
      row.insertBefore(row.parent().find('tr:first-child'))
    } else { // move to bottom
      row.insertAfter(row.parent().find('tr:last-child'))
    }
  });
  $('#otherteam').on('change', '[type=checkbox]', function() {
    var $this = $(this);
    var row = $this.closest('tr');
    if ($this.prop('checked')) { // move to top
      row.insertBefore(row.parent().find('tr:first-child'))
    } else { // move to bottom
      row.insertAfter(row.parent().find('tr:last-child'))
    }
  });
  $('td:first-child input').change(function() {
    $(this).closest('#myteam tr').toggleClass("highlight", this.checked);
  });
  $('td:first-child input').change(function() {
    $(this).closest('#otherteam tr').toggleClass("highlight", this.checked);
  });
});

Answer 1

如 K.Angel7 所述，jQuery 选择器存在小问题。

我修复了 jsfiddle，给你: http://jsfiddle.net/Manoj85/k1xfehrq/98/

  $('#otherteam td input').change(function() {
    console.log("Other Team");
    $(this).closest('#otherteam tr').toggleClass("highlight", this.checked);
  });
  $('#myteam td input').change(function() {
    console.log("My Team");
    $(this).closest('#myteam tr').toggleClass("highlight", this.checked);
  }); 

始终考虑添加特定的父级，在您的情况下，#myteam 和#otherteam。将来维护任何更新会更好。

希望对您有所帮助。