Блог

Урезанный рабочий jsfiddle

У меня выделяются строки, если установлен их флажок. Он работает на одной таблице, но по какой-то причине я не понимаю, почему он не делает то же самое с другой. Все остальные функции именно такие, как я хочу.

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

Как упоминал 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 во втором событии изменения будет тем, что вам нужно, потому что это не первый дочерний элемент.