Funktion für jedes Element einzeln ausführen?

Question

Wie führe ich eine Funktion für jedes Element einzeln aus?

Also wenn ich auf die erste open klicke, sollte nur die erste Gruppe öffnen.

$(document).on('click', "a.showdetails", function() { 
 
     $(".group").toggleClass("opened"); 
 
    });

.option{ 
 
    width: 200px; 
 
} 
 

 
.showdetails{ 
 
    display: block; 
 
} 
 

 
.group{ 
 
    display: none; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #f2f2f2; 
 
} 
 

 
.group.opened{ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="option"> 
 
    <a href="#" class="showdetails">open</a> 
 
    <div class="group"></div> 
 
</div> 
 

 
<div class="option"> 
 
    <a href="#" class="showdetails">open</a> 
 
    <div class="group"></div> 
 
</div>

Answer 1

Sie müssen geklickt Element Kontext verwenden, seine Geschwister Element mit Klassengruppe zu finden:

var groupelements = $('.group'); 
$(document).on('click', "a.showdetails", function() { 
    var targetgroup = $(this).next('.group'); 
    groupelements.filter(targetgroup).removeClass("opened") 
    targetgroup.toggleClass("opened"); 
}); 

Hinweis: Sie Ereignis Delegation hier verwendet haben. Sie sollten es nur verwenden, wenn die Elemente a.showdetails dynamisch geladen werden. Verwenden Sie andernfalls .click, um den Klick für das statische Element zu binden.

Answer 2

Sie müssen zuerst das übergeordnete Element für das angeklickte Anchor abrufen. Das Verwenden von Jquery .next() kann ein Problem sein, wenn Sie die HTML-Elementplatzierung ändern. Aber Element durch den übergeordneten Container zu bekommen ist eine gute Übung.

HTML:

<div class="option"> 
     <a href="#" class="showdetails">open</a> 
     <div class="group">hello 1</div> 
    </div> 

    <div class="option"> 
     <a href="#" class="showdetails">open</a> 
     <div class="group">hello 2</div> 
    </div> 

Javascript/JQuery:

$(function() { 

     $(".showdetails").click(function() { 
     // Getting Parent of clicked Anchor 
     var parent_option = $(this).closest('.option'); 
     // Toggle class to the child .group class element. 
     $(".group", parent_option).toggleClass("opened");  
     }); 

    }); 

CSS:

.option{ 
     width: 200px; 
    } 

    .showdetails{ 
     display: block; 
    } 

    .group{ 
     display: none; 
     width: 200px; 
     height: 100px; 
     background: #f2f2f2; 
    } 

    .group.opened{ 
     display: block; 
    } 

ARBEITS DEMO:http://jsfiddle.net/ha97tmjf/