Javascript隐藏元素，然后放置其他内容

Question

我有一个小问题。

对于我们必须使用Java语言编写的任务，我需要一些帮助。

我们有一个文本，有些单词我们有一个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

如果父母的背景只有一种颜色（没有设计或图案），则可以编写如下内容。

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'; 而不是空字符串以使它们消失（并相应地更改测试）。

但这听起来不是您的真正问题，而是显示文本以表明其中存在一个元素。 我建议使用一个包含类'invul'的<div> ，其中包含另外2个<div>元素：1是实际内容不可见时要显示的文本，另一个是实际内容。 像这样：

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

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