zeigen n-te: div 1, wenn i n-ten klicken: Anker

Question

Good Evening hilfreich Leute von Stackoverflow,

Ich möchte .detail-tile die ** ** geklickt .project-tile-normal und zeigen die entsprechende Beschreibung div verbergen.

Ich las einige Artikel zu meiner Frage durch, aber ich stolperte in eine logische Brickwall in meinem Kopf. Unnötig zu sagen, ich bin ein Anfänger in Jquery und vielleicht gibt es einen besseren Weg, das zu tun, ich habe es einfach nicht gefunden.

Hier ist, was ich bisher als „Antworten“ gefunden:
Hide Children, Show nth Child-die nächste Antwort auf meine Frage
Show and Hide Several Links-diese Lösung macht den Kopf schwindlig

Mein HTML besteht aus zwei Reihen von divs, ähnlich der vereinfachte Darstellung:

<div class="wrapper"> 
<div class=".project-tile-normal">some pictures</div> 
<div class=".project-tile-normal"></div> 
<div class=".project-tile-normal"></div> 

<div class=".detail-tile">description</div> 
<div class=".detail-tile"></div> 
<div class=".detail-tile"></div> 
</div> 

Dies ist, was ich bisher codiert haben:

JQUERY

$(document).ready(function(){ 
$('.project-tile-normal').on("click", function() { 
if($(this).hasClass("active")) { 
    $(this).fadeOut(150); 
} else { 
    var itemid = '#div' + $(this).attr('target'); // my own try to get the Element of the divs. 
    console.log(itemid); 
    $(this).addClass("active"); 
$(".detail-tile").removeClass("hidden"); 
} 
}); 

$('button').on("click", function(){ 
    $(".detail-tile").addClass("hidden"); 
    $(".project-tile-normal").fadeIn(150); 
    $(".project-tile-normal").removeClass("active"); 
}); 
});//document ready 

Sollte ich alle Einzelteile in einem Array gesetzt und zählen sie dann aus? Danke im Vorraus für deine Hilfe.

Answer 1

Zunächst beachten Sie, dass Ihre class Attribute in der HTML keine . Zeichen enthalten .

Im Hinblick auf die JS, können Sie Elemente von Index verknüpfen, indem die index() vom geklickt Elemente Abrufen dann das passende erforderliche Elements eq() mit der Auswahl, so etwas wie:

$('.project-tile-normal').click(function() { 
    var index = $(this).index(); 
    $('.detail-tile').hide().eq(index).show(); 
}); 

Working example

Answer 2

Sie deklarieren Ihre Klassen in Ihrem HTML falsch. Es wird project-tile-normal statt .project-tile-normal sein. Wenn du das tust, wirst du feststellen, dass deine Events funktionieren. Dann können Sie diesen Anleitungen folgen, um Ihr gewünschtes Verhalten beim Klicken auf den Projekttitel auszuführen.

Answer 3

Zuerst entfernen Sie die . vor dem Klassenattribut, da es nicht benötigt wird. Gemäß dem jQuery-Code besteht keine Notwendigkeit dafür. Wenn Sie . verwenden, müssen Sie es mit \., im jQuery-Selektor kann es wie $('.\\.project-tile-normal') sein.

---

Jetzt können Sie den Rest mit index() und eq(),

$('.project-tile-normal').click(function() { 
 
    // you can use toggle if you want toggle between the show and hidden 
 
    // else use show method 
 
    $('.detail-tile').eq($(this).index()).toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="project-tile-normal">some pictures</div> 
 
    <div class="project-tile-normal">1</div> 
 
    <div class="project-tile-normal">2</div> 
 

 
    <div class="detail-tile">description</div> 
 
    <div class="detail-tile">1</div> 
 
    <div class="detail-tile">2</div> 
 
</div>