JQuery hide and show div's with same classes-CodePudding

I need some help on a jquery function. My main objective is to have multiple divs on same page with same classes on buttons etc but when a button is pressed it only changes on the div it's on. Im using li element as a button to change some values on top. Here goes a part of my code. Hope that anyone can help me. Many thanks

$(function() {

    $(".older").hide();

    $(".ofertas").on('click', function () {
        $(".old").hide();
        $(".older").show();
    });

    $(".desconto").on('click', function () {
        $(".old").show();
        $(".older").hide();

    });

});

li {
  cursor: pointer;
}

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

     <div class="holdPrice">
       <sub>€</sub><span class="old oldValue" data-fixValue="true">40</span>
       <span class="older" data-fixValue="true">43</span>
       <sup>,99</sup>
       <span class="mes">mês</span>
     </div>


     <ul class="offersList">
       <li class="desconto select" data-desc="2">
         <span>Desconto </span>
       </li>
       <li class="ofertas">
         <span>oferta 1</span>
       </li>
       <li class="ofertas">
         <span>oferta 2</span>
       </li>
     </ul>
   </div>
   
   
   

   <div class="linePrice">

     <div class="holdPrice">
       <sub>€</sub><span class="old oldValue" data-fixValue="true">40</span>
       <span class="older" data-fixValue="true">43</span>
       <sup>,99</sup>
       <span class="mes">mês</span>
     </div>


     <ul class="offersList">
       <li class="desconto select" data-desc="2">
         <span>Desconto </span>
       </li>
       <li class="ofertas">
         <span>oferta 1</span>
       </li>
       <li class="ofertas">
         <span>oferta 2</span>
       </li>
     </ul>
   </div>
   
   


   <div class="linePrice">

     <div class="holdPrice">
       <sub>€</sub><span class="old oldValue" data-fixValue="true">40</span>
       <span class="older" data-fixValue="true">43</span>
       <sup>,99</sup>
       <span class="mes">mês</span>
     </div>


     <ul class="offersList">
       <li class="desconto select" data-desc="2">
         <span>Desconto </span>
       </li>
       <li class="ofertas">
         <span>oferta 1</span>
       </li>
       <li class="ofertas">
         <span>oferta 2</span>
       </li>
     </ul>
   </div>

CodePudding user response：

You need to give different classes/ ids to the other div

CodePudding user response：

Inside the onclick handlers, you use $(".old") which selects all elements with that class. Try narrowing it down by finding the .old elements in the containing .linePrice div.

Using $(this).parent().parent().find('.old'). This only selects the .old element inside of the .linePrice container of the clicked .ofertas element. Same goes for .older.

So it would become:

$(function() {

    $(".older").hide();

    $(".ofertas").on('click', function () {
        $(this).parent().parent().find(".old").hide();
        $(this).parent().parent().find(".older").show();
    });

    $(".desconto").on('click', function () {
        $(this).parent().parent().find(".old").show();
        $(this).parent().parent().find(".older").hide();

    });

});

li {
  cursor: pointer;
}

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

     <div class="holdPrice">
       <sub>€</sub><span class="old oldValue" data-fixValue="true">40</span>
       <span class="older" data-fixValue="true">43</span>
       <sup>,99</sup>
       <span class="mes">mês</span>
     </div>


     <ul class="offersList">
       <li class="desconto select" data-desc="2">
         <span>Desconto </span>
       </li>
       <li class="ofertas">
         <span>oferta 1</span>
       </li>
       <li class="ofertas">
         <span>oferta 2</span>
       </li>
     </ul>
   </div>
   
   
   

   <div class="linePrice">

     <div class="holdPrice">
       <sub>€</sub><span class="old oldValue" data-fixValue="true">40</span>
       <span class="older" data-fixValue="true">43</span>
       <sup>,99</sup>
       <span class="mes">mês</span>
     </div>


     <ul class="offersList">
       <li class="desconto select" data-desc="2">
         <span>Desconto </span>
       </li>
       <li class="ofertas">
         <span>oferta 1</span>
       </li>
       <li class="ofertas">
         <span>oferta 2</span>
       </li>
     </ul>
   </div>
   
   


   <div class="linePrice">

     <div class="holdPrice">
       <sub>€</sub><span class="old oldValue" data-fixValue="true">40</span>
       <span class="older" data-fixValue="true">43</span>
       <sup>,99</sup>
       <span class="mes">mês</span>
     </div>


     <ul class="offersList">
       <li class="desconto select" data-desc="2">
         <span>Desconto </span>
       </li>
       <li class="ofertas">
         <span>oferta 1</span>
       </li>
       <li class="ofertas">
         <span>oferta 2</span>
       </li>
     </ul>
   </div>