Question

如果勾选了复选框，我会突出显示行。它在一张桌子上工作，但出于某种原因，我无法理解为什么它在另一张桌子上没有做同样的事情。所有其他功能正是我想要的。

$(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。最好在将来维护任何更新。

希望它有所帮助。

Answer 2

一种解决方案是让您的选择器更精确。

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

请注意，:checkbox是jquery-defined psuedo-selector

Here's a fiddle我在那里重构了一些东西。

Answer 3

问题$('td:first-child input')，在第二次更改事件中删除:first-child将是您需要的，因为它不是第一个孩子。

jQuery背景颜色改变单独的功能

3 个答案: