单击按钮时如何使按钮下的特定 li 出现
How to make specific li's under a button appear when button is clicked
首先只想说我是编码的新手,我知道我的代码不是最有效的,我只是在试验。现在开始提问!
我有一个与 NodeJS 代理通信的 EJS 文件,它向它发送 JSON 数据进行操作(希望我说的是对的)。下面的代码对我来说工作正常,我遇到的唯一问题是,当我单击一个按钮时,它会取消隐藏所有的 li,而不仅仅是我单击的按钮下的 li。分配 classes 然后为每个生成的 class 编写 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 a view appear through animation when a button is clicked?
Trying to make a div appear when a button is clicked
使用 jQuery next()
函数和 a
选择器
$(document).ready(function(){
$('button').on('click', function(){
$(this).next('a').toggleClass('hide');
});
});
您可以将 closest()
函数与 li
选择器一起使用。
$(document).ready(function(){
$('button').on('click'),function(){
$(this).closest('li').addClass('hide');
});
});
由于 <a>
标签的数量是可变的,我认为将它们放在 <div>
中,然后为 div
切换 class 是一个更干净的解决方案,并且您也可以在那里使用 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');
});
});
如果可行,请告诉我。
首先只想说我是编码的新手,我知道我的代码不是最有效的,我只是在试验。现在开始提问!
我有一个与 NodeJS 代理通信的 EJS 文件,它向它发送 JSON 数据进行操作(希望我说的是对的)。下面的代码对我来说工作正常,我遇到的唯一问题是,当我单击一个按钮时,它会取消隐藏所有的 li,而不仅仅是我单击的按钮下的 li。分配 classes 然后为每个生成的 class 编写 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 a view appear through animation when a button is clicked?
Trying to make a div appear when a button is clicked
使用 jQuery next()
函数和 a
选择器
$(document).ready(function(){
$('button').on('click', function(){
$(this).next('a').toggleClass('hide');
});
});
您可以将 closest()
函数与 li
选择器一起使用。
$(document).ready(function(){
$('button').on('click'),function(){
$(this).closest('li').addClass('hide');
});
});
由于 <a>
标签的数量是可变的,我认为将它们放在 <div>
中,然后为 div
切换 class 是一个更干净的解决方案,并且您也可以在那里使用 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');
});
});
如果可行,请告诉我。