CODEWITHSUNDEEP
javascriptcss
Josh
Josh

Reputation: 27

jQuery background color change on separate functions

Stripped down working jsfiddle

I have rows being highlighted if their checkbox is checked. It works on one table but for some reason I can't see why it's not doing the same on the other. All other functionality is exactly how I want it.

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

Upvotes: 1

Views: 54

Answers (3)

user5051310
user5051310

Reputation:

One solution would be to make your selector more precise.

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

However, it would be simpler to move the highlight toggle into the other change 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'))
  }
  $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);
});

That should answer the question. But, I noticed the functions could be simplified. You can replace all of the code posted with just these lines:

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

Note that the :checkbox is a jquery-defined psuedo-selector

Here's a fiddle where I refactored some more stuff.

Upvotes: 1

Manoj
Manoj

Reputation: 295

As K.Angel7 mentioned, minor issue with the jQuery selector.

I fixed the jsfiddle and here you go: 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);
  });

Always, consider adding specific parent, in your case, #myteam and #otherteam. It would be better for maintenance of any updates in future.

Hope it helps.

Upvotes: 2

KAngel7
KAngel7

Reputation: 161

Here is the problem $('td:first-child input'), remove :first-child in the second change event will be what you need because it isn't the first child.

Upvotes: 0

Related Questions