单击按钮时，如何在按钮下方显示特定的里数

Question

首先，我只想提及我对编码非常陌生，并且我知道我的代码不是最高效的，我只是在试验。现在回答这个问题！

我有一个EJS文件，谈到一个NodeJS代理，它发送它的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的建议为好。所以，你的EJS会像：

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

而且在JQuery的：

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

让我知道是否可行。

Answer 2

使用jQuery的next()功能与a选择

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

Answer 3

您可以使用closest()功能与li选择。

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