Jquery button action for each listitem-CodePudding

I made a joblisting and want to program an action for each jobitem, but my code apparently makes the mods to the last item in the list and i don't get why.

can someone help me?

this is the HTML

<div class="joblist">
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
</div>

This is the Js (Jquery)

<script>
$(document).ready(function(){
    $('.joblist-item').each(function(){
        thisjob = this;
        $('.readmore',thisjob).click( function(){
            $('.joblist-item-content',thisjob).css("background", "red");
        });
    });
});
</script>

CodePudding user response：

You are defining thisjob globally, so on every iteration the reference is kept to the same element (the last one in the iteration), you just need to prefix it with the keyword var, let or const: var thisjob = this

$(document).ready(function(){
    $('.joblist-item').each(function(){
        var thisjob = this;
        $('.readmore', thisjob).on('click', function(){
            $('.joblist-item-content', thisjob).css("background", "red");
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="joblist">
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
</div>

CodePudding user response：

You forgot to declare a variable with let or const (or var).

Also putting thisjob together with this, doesn't make sense to me. Why would you want to put a click event on both a parent and a child?

Here is how I made it working:

$(document).ready(function(){
  $('.joblist-item').each(function() {
    $(this).click(function() {
      let content = $(this).find('.joblist-item-content')
      $(content).css("background", "red");
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="joblist">
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
</div>