嗨

Question

新手的基本问题……

我总是遇到相同的问题：我经常希望元素“ A”在隐藏“ B”时在单击时显示元素“ B”，但在可见时将其隐藏。这是两种不起作用的尝试：

    let ref = document.getElementsByTagName('sup');
    let refContent = document.getElementsByTagName('i');
    
    for(let i = 0; i < ref.length ; i++) {
        ref[i].addEventListener('click', function() {
            if (refContent[i].style.display == "inline") {
                refContent[i].style.display = "none";
            } else {
                refContent[i].style.display = "none";
            };
        });
    }

let ref = document.getElementsByTagName('sup');
let refContent = document.getElementsByTagName('i');

for(let i = 0; i < ref.length ; i++) {
    if (refContent[i].style.display == "") {
        ref[i].addEventListener('click', function() {
            refContent[i].style.display = "inline";
        });   
    } else {
        ref[i].addEventListener('click', function() {
            refContent[i].style.display = "none";
        });   
    }
}

Answer 1

嗨

我将更改一些变量名称，以使其更易于讨论。所以，你从强壮开始

    // get all elements with tag sup
    let buttons = document.getElementsByTagName('sup'); 
    //get all elements with tag i
    let showables = document.getElementsByTagName('i');

对于每个元素buttons，我们要绑定一个onclick事件监听器。 showables应该响应这些点击。你写


    //for every `button` bind this `event listener`
    buttons[i].addEventListener('click', function() {
        if (showable[i].style.display == "inline") {
            showable[i].style.display = "none";
        } else {
            showable[i].style.display = "none";
        };
    });
}

为了更清楚一点，让我们取出function并为其命名

let show_hide = function(i) {
        if (showable[i].style.display == "inline") {
            showable[i].style.display = "none";
        } else {
            showable[i].style.display = "none";
        };
});

//for each button, bind show_hide
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', show_hide(i))
}

这里的循环完全符合您的期望；它将show_hide绑定到每个button。 show_hide是做什么的？

    //if the element is shown, hide it
    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    //if the element is not shown, hide it
    } else {
        showable[i].style.display = "none";
    };

如您所见，show_hide会隐藏任何元素！因此快速更改将为您解决这个问题。

    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    //if not shown, show
    else {
****    showable[i].style.display = "inline";
    };

将它们放在一起，这应该可以工作

let show_hide = function(i) {
    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    } else {
        showable[i].style.display = "inline";
    };
});

//for each button, bind show_hide
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', show_hide(i))
}

如果您希望我的问题解决方案，我将更愿意以自己的方式解决此问题。发表评论，让我知道！希望对您有帮助

fin

Answer 2

我将解释您所写的内容，但我没有完整的代码，如果您在添加代码（html）来更新代码时，我将解决一些问题并进行更新。

您应该将所选元素放入数组中，因为某些浏览器不允许您在NodeLists上循环。您可以使用Array.From()的几种方式将NodeLists更改为数组。将NodeLists更改为数组后，您可以使用forEach()循环安全地遍历数组中的元素。

let ref = Array.from(document.getElementsByTagName('sup'));
let refContent = Array.from(document.getElementsByTagName('i'));
ref.forEach(el => {
    el.addEventListener('click', e => {
        e.target.getElementsByTagName('i').style.display = '' // do something
    });
});

此摘要很可能无法按原样工作，我缺少完成此脚本的信息，但这也许是进一步探索的一个很好的起点。（搜索内容并添加'mdn'，以获得良好的效果。）

最好直接添加或删除包含所需CSS属性的CSS类，而不是直接更改元素的样式。您也可以Usync个课程：element.toggle('className)。

Javascript-脚本在第二次单击时不起作用

2 个答案:

嗨

fin