Изменение цвета фона jQuery для отдельных функций

Question

Изменение цвета фона jQuery для отдельных функций

Снято с работы 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);
  });
});

javascript,css,

1

Ответов: 3

JavaScript, CSS,

Похожие вопросы

score 0 · Accepted Answer

0 принят

Вот проблема $('td:first-child input'), удалить :first-childво втором событии изменения будет то, что вам нужно, потому что это не первый ребенок.

score 2 · Accepted Answer

2

Как упоминал 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. Было бы лучше для поддержания любых обновлений в будущем.

Надеюсь, поможет.

score 1 · Accepted Answer

1

Одним из решений было бы сделать ваш селектор более точным.

$('#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это jewery-определенный psuedo-selector

Вот скрипка, где я реорганизовал еще кое-что.