各要素の機能を別々に実行しますか？

Question

各要素ごとに機能を個別に実行するにはどうすればよいですか？

最初のopenをクリックすると、最初のグループだけが開きます。

$(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

あなたは、クラスのグループとその兄弟要素を見つけるためにクリックした要素のコンテキストを使用する必要があります。

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

注：ここではイベントの委任を使用しています。要素a.showdetailsが動的にロードされている場合にのみ使用してください。そうでない場合は、.clickを使用して静的要素のクリックをバインドします。

Answer 2

Clicked Anchorの親を最初に取得する必要があります。 Jquery .next()を使用すると、HTML要素の配置を変更するときに問題が発生する可能性があります。しかし、親コンテナによって要素を得ることは良い習慣です。

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; 
    } 

をWORKING DEMO：http://jsfiddle.net/ha97tmjf/