ボタンをクリックしたときに特定のliをボタンの下に表示する方法

Question

最初に言いたいのは、私はコーディングが新しく、コードが最も効率的ではないということです。今質問に！

私はNodeJSプロキシと通信するEJSファイルを持っています。このファイルはJSONデータを操作して送信します（私がそのことを望んでいたと思います）。下のコードは私のためにうまくいきます。私が抱えている唯一の問題は、ボタンをクリックすると、クリックしたボタンの下にあるliの代わりに、すべてのliを非表示にすることです。クラスを割り当ててから、生成されるクラスごとにJavaScriptコードを記述するのは非常に難しいです。なぜなら、最初にいくつのボタンがあるのか​​わからないからです。

は、私が現在持っている：

のJavascript（jQueryの）コード

$(document).ready(function(){ 
    $('button').on('click', function(){ 
     $('li').toggleClass('hide'); 
    }); 
}); 

HTML/EJSコード

<% for (i = 0; i < sortedStackName.length; i++) { %> 
    <% if (sortedStackName[i] == sortedStackName[i + 1]) { %> 
    <% } else { %> 
    <button class="btn btn-primary space" id="<%= %>"><%= sortedStackName[i] %></button> 
    <% data3.forEach(function (provider) { %> 
    <% if (provider['stack_name'] == sortedStackName[i]) { %> 
    <a href="#"><li class="hide"><%= provider['service_name'] %></li></a> 
    <% }}); %> 

働いていない私が読んだいくつかの記事：

jQuery display nested ul on click of div in parent li

how to make text appear when a button is clicked

How to make a view appear through animation when a button is clicked?

Trying to make a div appear when a button is clicked

Answer 1

<a>タグの数が可変であるので、私は<div>に置くと、そのdivのクラスをトグルするクリーナーソリューションで、あなたがそこにもAshkanの提案を使用することができると思います。

<div class="hide"> 
<% data3.forEach(function (provider) { %> 
<% if (provider['stack_name'] == sortedStackName[i]) { %> 
<a href="#"><li><%= provider['service_name'] %></li></a> 
<% }}); %> 
</div> 

とjQueryで：だからあなたのEJSは次のようになります

$(document).ready(function(){ 
    $('button').on('click', function(){ 
     $(this).next('div').toggleClass('hide'); 
    }); 
}); 

はそれが動作するかどうか私に教えてください。

Answer 2

あなたはliセレクタでclosest()機能を使用することができますaセレクタ

$(document).ready(function(){ 
    $('button').on('click', function(){ 
     $(this).next('a').toggleClass('hide'); 
    }); 
}); 

Answer 3

でjQueryのnext()機能を使用してください。

$(document).ready(function(){ 
    $('button').on('click'),function(){ 
    $(this).closest('li').addClass('hide'); 
    }); 
});