gpt4 book ai didi

javascript - 根据作为参数传递给 javascript 的值更改 div 样式

转载 作者:行者123 更新时间:2023-11-28 03:07:09 26 4
gpt4 key购买 nike

这是我试过的javascript

function toggle(clicked_id,name) {
alert(clicked_id);
alert(name);
var text = document.getElementById("clicked_id");
var ele = document.getElementById("name");
alert(ele.style.display);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+";
text.value="+"
}
else {
ele.style.display = "block";
text.innerHTML = "-";
text.value="-"
}
return
}

而 html 是

<input type="button" id="displayText1" onClick="return toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText1">

<div id="toggleText1" style="display: none"><h1>Wallet Info Here</h1></div> </div>

<input type="button" id="displayText2" onClick="toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText2">

<div id="toggleText2" style="display: none"><h1>Wallet Info Here</h1></div> </div>

我试过了,但我收到的只是警告……div 样式没有变化。那就是不改变隐藏或显示模式

最佳答案

问题是这样的:

var text = document.getElementById("clicked_id"); // func arg is in string format
var ele = document.getElementById("name"); // func arg is in string format

您必须在不带引号的情况下使用它。

var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);

还有更好的方法,你可以这样做:

<input type="button" id="displayText1" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText1">

<input type="button" id="displayText2" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText2">

只需将 this 传递给参数,您就可以像这样更改函数:

function toggle(el) {
var text = el;
var ele = document.getElementById(el.name);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+";
text.value="+"
} else {
ele.style.display = "block";
text.innerHTML = "-";
text.value="-"
}
}

因为您不需要返回任何东西,它只是一个 dom 操作的东西,所以您可以删除 return 语句。

我建议你避免使用内联事件处理程序,所以如果你对不显眼的 javascript 感兴趣,那么你可以将这个事件处理程序放在一个带有 toggle() 函数的 js 文件中,你可以使用它:

document.getElementById('displayText1').addEventListener('click', function(){
toggle(this);
});
document.getElementById('displayText2').addEventListener('click', function(){
toggle(this);
});

或使用 querySelectorAll 方法:

document.querySelectorAll('#displayText1, #displayText2').addEventListener('click', function(){
toggle(this);
});

关于javascript - 根据作为参数传递给 javascript 的值更改 div 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32112532/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com