[英]Javascript: conditional function onClick button
I have to functions: openNav
and closeNav
and a button: 我必须执行以下功能: openNav
和closeNav
以及一个按钮:
<a href="#" data-toggle="sidebar-collapse-button">
<img class="sidebar-img" id = "collapse-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/collapse.png"/>
<span class="sidebar-text">Collapse</span>
</a>
A try to set a conditional onClick
like this: 尝试像这样设置条件onClick
:
var collapsed = 0;
$('[data-toggle=sidebar-collapse-button]').click(function() {
if (collapsed==0) {
closeNav();
}
else {
openNav();
}
});
So that when collapsed = 1
function openNav
is called and vice versa: 因此,当collapsed = 1
调用openNav
函数,反之亦然:
function openNav() {
...
collapsed=0;
}
function closeNav() {
...
collapsed=1;
}
However it only works the first time to call closeNav
and then the button doesn't react at all. 但是,它仅在第一次调用closeNav
,然后按钮完全不起作用。
Here is a simple toggler in vanilla Javascript. 这是香草Javascript中的一个简单切换器。 I am not sure want you want to do or what frameworks you use but this is the basic idea 我不确定您想做什么或使用什么框架,但这是基本思想
<a href="#" onCLick="toggleSidebar()" data-toggle="sidebar-collapse-button">
<span class="sidebar-text">Collapse</span>
</a>
<div id="myDiv">
Collapsed div
</div>
toggleSidebar = () => {
let element = document.getElementById("myDiv")
if(element.classList.contains("mystyle")){
element.classList.remove("mystyle");
} else element.classList.add("mystyle");
}
As @connexo said, I would be inclined to use a toggle as well - if it is a show and hide you are trying to achieve. 正如@connexo所说,我也倾向于使用切换开关-如果要显示和隐藏,则尝试实现。
If you want to use your logic, you can do something like this using a data attribute (or something similar): 如果要使用逻辑,则可以使用数据属性(或类似方法)执行以下操作:
Eg: 例如:
<a href="#" data-toggle="sidebar-collapse-button" data-state="0">
<img class="sidebar-img" id = "collapse-img" src="https://via.placeholder.com/150"/>
<span class="sidebar-text">Collapse</span>
</a>
And for your script you can use: 对于您的脚本,您可以使用:
var collapsed = 0;
$('[data-toggle=sidebar-collapse-button]').click(function() {
var state = $(this).data('state');
if (state == "0") {
console.log("Closed");
$(this).data('state','1')
} else {
console.log("Opened");
$(this).data('state','0')
}
console.log(state);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.