使用单个javascript更改多个复选框的范围
我被困在这个问题上,我对HTML/JavaScript代码是新手。我正在尝试创建一个HTML代码,其中复选框必须将图像范围(或标题)更改为“CORREGIDO”。因此,许多图像的标题上都有一个参考号,但当单击该图像的复选框时,必须将字符串更改为“CORREGIDO”。到目前为止,我的HTML代码如下所示:使用单个javascript更改多个复选框的范围,javascript,checkbox,Javascript,Checkbox,我被困在这个问题上,我对HTML/JavaScript代码是新手。我正在尝试创建一个HTML代码,其中复选框必须将图像范围(或标题)更改为“CORREGIDO”。因此,许多图像的标题上都有一个参考号,但当单击该图像的复选框时,必须将字符串更改为“CORREGIDO”。到目前为止,我的HTML代码如下所示: <ul class="galeria"> <li><a href="#img1"><img src="Foto1.jpg" onerror
<ul class="galeria">
<li><a href="#img1"><img src="Foto1.jpg" onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox" id="exp1"> </a>
<h2><span class="spanTxt []">OT: 4251678</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li>
<li><a href="#img2"><img src="Foto2.jpg" onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox" id="exp2"> </a>
<h2><span class="spanTxt []">OT: 4876852</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li>
</ul>
也许他不是最好的方法 您正在使用的JavaScript代码
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})
function changeDisplay()
{document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})}
只有一个document.getElementById('exp1').addEventListener('change',函数(e){changeDisplay()})
什么时候应该有两个
这是一个修复程序,包括这两个
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay(e)})
document.getElementById('exp2').addEventListener('change', function(e) {changeDisplay(e)})
function changeDisplay(e)
{e.target.parentElement.nextElementSibling.children[1].classList.toggle('hidden')}
我更改了函数changesplay(e),因为
forEach()
函数在操作这两个元素时遇到了障碍。当复选框未选中时,代码将正确隐藏“CORREGIDO”,并在复选框选中时显示它。谢谢您的回答,但我需要更改多个复选框的代码。我会做一个个人网页,所以我可能会用30张图片,每张都有一个复选框。除了在脚本上添加另一行之外,还有其他选择吗?是的,有,很抱歉没有想到这一点document.queryselectoral('.confirmation').forEach(item=>{item.addEventListener('change',e=>{changesplay(e);})})
应该可以解决这个问题。我的上帝。。。我花了好几天思考这个。。。哈哈,真的谢谢你!!
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay(e)})
document.getElementById('exp2').addEventListener('change', function(e) {changeDisplay(e)})
function changeDisplay(e)
{e.target.parentElement.nextElementSibling.children[1].classList.toggle('hidden')}