CODEWITHSUNDEEP
jquery
bart2puck
bart2puck

Reputation: 2522

How do i change color on inputs in a selected row

What can i add to my JS to toggle the class of the text in the inputs? at the moment the row background gets .remove toggled, but I can not figure out how to toggle class of the text inside the input.

My HTML:

<div class='row shopping'>
    <div><input type='text' id='item' value='1'></div>
    <div><input type='text' id='cost' value='1'></div>
    <div><input type='text' id='group' value='1'></div>
    <div><input type='text' id='code' value='1'></div>
</div>

MY JS:

$('.shopping').click(function(){
    $(this).toggleClass('remove');
 });

MY CSS:

.remove{
   background-color:red;
 }

Upvotes: 0

Views: 29

Answers (2)

Twisty
Twisty

Reputation: 30893

Consider the following.

$(function() {
  $('.shopping').click(function() {
    $("input", this).toggleClass('remove');
  });
});
.remove {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row shopping'>
  <div><input type='text' id='item' value='1'></div>
  <div><input type='text' id='cost' value='1'></div>
  <div><input type='text' id='group' value='1'></div>
  <div><input type='text' id='code' value='1'></div>
</div>
<div class='row shopping'>
  <div><input type='text' id='item' value='2'></div>
  <div><input type='text' id='cost' value='2'></div>
  <div><input type='text' id='group' value='2'></div>
  <div><input type='text' id='code' value='2'></div>
</div>

When the click event is called, this relates to the element that was clicked or called upon. We then want to target the input elements within that element.

The selector $("input", this) is the same as $(this).find("input"), so either can be used.

Upvotes: 2

David
David

Reputation: 219027

In this code:

$('.shopping').click(function(){
  $(this).toggleClass('remove');
});

The keyword this refers to the element which has the click handler attached to it, which in this case is any element with the shopping class. Without altering the markup, you can instead target the <input> elements within that .shopping element:

$('.shopping input').click(function(){
  $(this).toggleClass('remove');
});

In this case, this would refer to the <input> since that's the element which is getting the click handler attached to it.

Upvotes: 0

Related Questions