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);

使用addEventListener更改显示样式

1 个答案: