Hice una lista de trabajos y quiero programar una acción para cada elemento de trabajo, pero aparentemente mi código hace que las modificaciones se realicen en el último elemento de la lista y no entiendo por qué.
¿alguien me puede ayudar?
este es el 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>Este es el Js (Jquery)
<script> $(document).ready(function(){ $('.joblist-item').each(function(){ thisjob = this; $('.readmore',thisjob).click( function(){ $('.joblist-item-content',thisjob).css("background", "red"); }); }); }); </script>Olvidó declarar una variable con let o const (o var ).
Además, poner thisjob junto con this , no tiene sentido para mí. ¿Por qué querría poner un evento de clic tanto en un padre como en un hijo?
Así es como lo hice funcionar:
$(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>Está definiendo thisjob globalmente, por lo que en cada iteración la referencia se mantiene en el mismo elemento (el último en la iteración), solo necesita prefijarlo con la palabra clave var , let o 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>