Wie fadeIn und fadeOut einzelne Div-Elemente mit foreach erstellt?

Ich habe eine foreach Schleife und dies schafft mehrere div Elemente.Wie fadeIn und fadeOut einzelne Div-Elemente mit foreach erstellt?

Ich habe ein onClick Ereignis, wenn der Benutzer auf dem div klickt wird es fadeIn oder fadeOut tun.

Das Problem ist, dass alle von der div's obvouisly gleichen id haben, und wenn ich auf einen der div's klicken sie verblassen in und nur das erste div-Element ausgeblendet.

Ich weiß nicht wirklich, wie man sie ein- und ausblendet.

Ich habe meinen Code in Fiddle

function showItems() { 
 
    var x = document.getElementById('showItemDiv'); 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()"> 
 
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> 
 
    <div class="row"> 
 
     <span class="" style="font-size:10px;">Item Name:</span> 
 
    </div> 
 
    <div class="row"> 
 
     <p> 
 
     <span class="" id="">Item 1</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div id="showItemDiv" style="display: none;"> 
 
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;"> 
 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
 

 
     <div class="row"> 
 
      <span class="" style="font-size:10px;">Time Setup:</span> 
 
     </div> 
 

 
     <div class="row"> 
 
      <p> 
 
      <span class="" id="id">1</span> 
 
      </p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()"> 
 
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> 
 
    <div class="row"> 
 
     <span class="" style="font-size:10px;">Item Name:</span> 
 
    </div> 
 
    <div class="row"> 
 
     <p> 
 
     <span class="" id="">Item 2</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div id="showItemDiv" style="display: none;"> 
 
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;"> 
 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
 

 
     <div class="row"> 
 
      <span class="" style="font-size:10px;">Time Setup:</span> 
 
     </div> 
 

 
     <div class="row"> 
 
      <p> 
 
      <span class="" id="id">2</span> 
 
      </p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-07-27 Cyber

Ich sehe keinen Klick Handhabung, noch Verblassen Code. – trincot

Sind Sie sicher, dass Sie 'jQuery' als Tag möchten? Sie scheinen Vanilla-JavaScript zu verwenden. Bitte beachten Sie auch, dass Ihr HTML-Code "id_must be unique_ sein muss" - Duplikate können zu seltsamen Problemen führen ... –

Wie bereits erwähnt, müssen Ihre IDs eindeutig sein (wenn Sie sie verwenden). Sie sollten in der Lage sein, sie stattdessen in class = "showItemDiv" zu ändern und sie in x = document.getElementsByClassName ("showItemDiv") zu ändern und dann diese zu durchlaufen und den Anzeigestil zu ändern. – musicinmyhead

Sie haben nicht dieselbe ID für mehrere Elemente verwendet werden soll. Die ID für jedes Element sollte immer eindeutig sein. Wenn Sie dieselbe ID verwenden, gibt der Selektor nur das erste Element mit der passenden ID zurück. Sie sollten die Klasse mit dem gleichen Namen verwenden.

Für jedes Element, auf das geklickt wird, finden Sie dessen Eltern, und Sie können ein Kind mit der erforderlichen Klasse finden und dessen Sichtbarkeit ändern.

function showItems(ev) { 
 
    var x = $(ev.target).parents('.row.rounded-top').find('.showItemDiv'); 
 
    $(x).toggle(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)"> 
 
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> 
 
    <div class="row"> 
 
     <span class="" style="font-size:10px;">Item Name:</span> 
 
    </div> 
 
    <div class="row"> 
 
     <p> 
 
     <span class="" id="">Item 1</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div class="showItemDiv" style="display: none;"> 
 
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;"> 
 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
 

 
     <div class="row"> 
 
      <span class="" style="font-size:10px;">Time Setup:</span> 
 
     </div> 
 

 
     <div class="row"> 
 
      <p> 
 
      <span class="" id="id">1</span> 
 
      </p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)"> 
 
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> 
 
    <div class="row"> 
 
     <span class="" style="font-size:10px;">Item Name:</span> 
 
    </div> 
 
    <div class="row"> 
 
     <p> 
 
     <span class="" id="">Item 2</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div class="showItemDiv" style="display: none;"> 
 
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;"> 
 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
 

 
     <div class="row"> 
 
      <span class="" style="font-size:10px;">Time Setup:</span> 
 
     </div> 
 

 
     <div class="row"> 
 
      <p> 
 
      <span class="" id="id">2</span> 
 
      </p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-07-27 20:56:54 Dij

Verstanden, die doppelten IDs sind das Problem. – Cyber

Ich habe aus Ihrem Code ein funktionierendes Snippet erstellt, das Sie als Referenz verwenden können. Überlegen Sie, die Antwort zu akzeptieren, wenn es hilft, Prost! – Dij

Dieses Snippet verhält sich auf die gleiche Weise. – Cyber

Wie fadeIn und fadeOut einzelne Div-Elemente mit foreach erstellt?

Antwort

Verwandte Themen