javascript - 使用 addEventListener 改变显示样式

Question

我正在尝试学习 addEventListener，但不知何故它不起作用。控制台也没有显示任何错误。

所以，我有这些部分:

<section id="media_image-4" class="widget widget_media_image">
    <div class="widget-wrap">
        <img width="150" height="150" src="https://domains/wp-content/uploads/2019/01/image-150x150.jpg" class="image wp-image-41  attachment-thumbnail size-thumbnail" alt="" style="max-width: 100%; height: auto;" sizes="(max-width: 150px) 100vw, 150px" />
    </div>
</section>

<section id="text-12" class="widget widget_text">
    <div class="widget-wrap"><div class="textwidget">
        <p id="sublinks">
        <img class="alignnone size-full wp-image-833" src="https://domains/wp-content/uploads/2019/09/icon-link.png" alt="" width="16" height="16" data-sitemapexclude="true" />
        </p>
    </div></div>
</section>

默认情况下，部分 id media_image-4 使用 css“display: none”隐藏。我希望在单击 icon-link.png 图像时显示它。所以，我创建了一个外部 javascript，并调用了它。文件是:

var mID = document.getElementById ("sublinks");
mID.addEventListener ("click", function() {
  var x = document.getElementById("media_image-4");
    if ( x.style.display == "none" || x.style.display == "") {
        x.style.display = "inline-block";
    } else {
        x.style.display = "";
    }
}, false);

我做错了什么吗？我应该怎么做才能显示 media_image-4？请指教。谢谢。

Answer 1

代替

else {
    x.style.display = "";
}

写

else {
    x.style.display = "none";
}

否则一切正常

但最好通过指定类解决

CSS:

#media_image-4 {
   display: none;
}

#media_image-4.showMe {
   display:inline-block;
}

和JS代码

document.getElementById ("sublinks").addEventListener ("click", () => {
   document.getElementById("media_image-4").classList.toggle('showMe')
}, false);