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

将jQuery next()函数与a选择器

一起使用

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

Answer 2

您可以将closest()功能与li选择器一起使用。

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

Answer 3

由于<a>代码的数量是可变的，我认为将它们放在<div>中，然后为div切换类是一个更清晰的解决方案，您可以使用Ashkan＆＃39那里的建议也是如此。所以你的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');
    });
});

如果有效，请告诉我。

单击按钮时，如何在按钮下显示特定的li

3 个答案: