jQuery背景颜色单独更改功能

jQuery background color change on separate functions

本文关键字：功能 单独更 颜色 背景 jQuery      更新时间：2023-09-26

剥离工作jsfield

如果行复选框被选中，则行将被高亮显示。它可以在一张桌子上工作，但出于某种原因，我不明白为什么它不能在另一张桌子上做同样的事情。所有其他功能都是我想要的。

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

As 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。这将更好地维护任何更新在未来。

希望能有所帮助。

一个解决方案是使你的选择器更精确。

$('#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定义的伪选择器

我在这里重构了一些东西

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

相关文章：