Wie man bestimmte li's unter einer Schaltfläche erscheinen lässt, wenn man auf die Schaltfläche klickt

Question

Zuerst möchte ich nur erwähnen, dass ich sehr neu im Codieren bin und ich weiß, dass mein Code nicht der effizienteste ist, ich experimentiere nur. Nun zu der Frage!

Ich habe eine EJS-Datei, die mit einem NodeJS-Proxy spricht, die JSON-Daten sendet, um zu manipulieren (hoffe, ich sagte das richtig). Der Code unten funktioniert gut für mich, das einzige Problem, das ich habe, ist, dass, wenn ich auf einen Knopf klicke, es alle Li's zeigt, anstatt nur die Li's unter dem Knopf, auf den ich geklickt habe. Es ist sehr schwierig, Klassen zuzuordnen und dann JavaScript-Code für jede generierte Klasse zu schreiben, weil ich nicht weiß, wie viele Schaltflächen es überhaupt geben wird.

ich derzeit haben:

Javascript (jQuery)-Code

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

HTML/EJS-Code

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

Einige Beiträge, die ich gelesen habe, die nicht gearbeitet haben:

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

Da die Anzahl der <a> Tags variabel ist, denke ich, sie in einem <div> platzieren und dann Makeln Klasse für diese div eine sauberere Lösung ist, und Sie können auch Ashkan Vorschlag dort verwenden. So wird Ihre EJS wie folgt aussehen:

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

Und in JQuery:

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

Lassen Sie mich wissen, ob das funktioniert.

Answer 2

Verwenden Sie die jQuery next() Funktion mit a Selektor

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

Answer 3

Sie die closest() Funktion mit li Selektor verwenden können.

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