Question

我有一个小问题。

对于我们必须在Javascript中完成的任务，我需要一些帮助。

我们有一个文本和一些单词，我们给出一个id（html）。在javascript中，我们必须创建一个函数，当它被单击时，所有带有id的单词都将变为不可见。我知道，我也可以这样做。但还有一件事。如果我们把这个词隐藏起来，就必须明白之前有一个词！如果你能理解的话，它看起来就像一个填充文本。

现在我有了这个：

function toggle_woordjes() {
var e = document.getElementsByClassName('invul');
for(i = 0; i < e.length; i++){
    if (e[i].style.display !== ''){
        e[i].style.display = '';
    }
    else {
        e[i].style.display = 'block';
    }

}

代码不再正常工作，因为我改变了很多，以至于我无法恢复原状。

我希望你们有人能帮助我。

很抱歉我的英语不是最好的！

干杯

Answer 1

如果父母的背景只有1种颜色（没有设计也没有图案），你可以写下面的内容。

object.style.backgroundColor="same color as parent"

但是如果背景更复杂：

function toggle_words() {
    var doms = document.getElementsByClassName('class_name');
    for (var i = 0; i < doms.length; ++i) {
        var domStyle = doms[i].style;
        if (domStyle.visibility === 'visible') {
            domStyle.visibility = 'hidden';
        }
        else {
            domStyle.visibility = 'visible';
        }
    }
}

我使用可见性而不是显示，因为元素保留在DOM中，因此用户知道之前有某些东西。

Answer 2

首先，我认为您需要将其设为e[i].style.display = 'none';而不是空字符串才能使它们消失（并相应地更改测试）。

但听起来这不是你真正的问题，而是显示文字以表明那里有一个元素。我建议你<div>上课＆＃39; invul＆＃39;其中包含2个其他<div>元素：1是真实内容不可见而另一个是真实内容时要显示的文本。像这样：

<div class="invul">
    <div class="msg">Word was here</div>
    <div class="word">I am the real message</div>
</div>

然后让它们消失并根据需要重新出现。

Javascript隐藏元素并将其他内容放在适当的位置

2 个答案: