Javascript jQuery在不同函数上的背景颜色更改

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

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

---

这里是问题

$（'td:first child input'）

，删除

：第二个更改事件中的第一个子项将是您所需要的，因为它不是第一个子项。
正如K.Angel7所述，jQuery选择器存在一个小问题

我修复了jsfiddle，给你：

<>始终，考虑在你的情况下加入特定的父母，即我的团队和其他团队。最好在将来维护任何更新

希望有帮助。
一个解决方案是使选择器更精确

$('#myteam td:first-child input').change(function() {
  $(this).closest('#myteam tr').toggleClass("highlight", this.checked);
});
$('#otherteam td:first-child input').change(function() {
  $(this).closest('#otherteam tr').toggleClass("highlight", this.checked);
});

但是，将突出显示切换移动到另一个更改功能中会更简单

$('#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'))
  }
  $this.toggleClass("highlight", this.checked);
});
$('#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'))
  }
  $this.toggleClass("highlight", this.checked);
});

这应该能回答问题。但是，我注意到功能可以简化。您可以仅使用以下行替换所有发布的代码：

$(document).ready(function() {
  $('#myteam, #otherteam').find(':checkbox').change(function() {
    var $this = $(this);
    var row = $this.closest('tr');
    if (this.checked) { // move to top
      row.prependTo(row.parent())
    } else { // move to bottom
      row.appendTo(row.parent())
    }
    row.toggleClass("highlight", this.checked);
  });
});

请注意，
：复选框是一个

我在这里重构了一些东西。
你能创建一个共享吗？html和JSFIDLE的行为都正常吗？除了在右边选中一个复选框，该行不会像左边那样高亮显示之外，其他一切都正常side@Josh我现在明白了，很好，我认为有一种方法可以提高效率。。但就我的水平而言，我必须分开做才能让它们发挥作用first@Josh聪明的思维
$(document).ready(function() {
  $('#myteam, #otherteam').find(':checkbox').change(function() {
    var $this = $(this);
    var row = $this.closest('tr');
    if (this.checked) { // move to top
      row.prependTo(row.parent())
    } else { // move to bottom
      row.appendTo(row.parent())
    }
    row.toggleClass("highlight", this.checked);
  });
});