javascript - 单击另一个图像时如何隐藏位于另一个图像之上的图像

Question

我有六个图像作为点，我在其上应用了点击动画。所有六个图像都有相应的文本，当单击其各自的点/图像时，这些文本会发光/颜色:白色现在的问题是我在图像/点上有一个图像/图标，当我点击另一个图像/点时它没有隐藏

两个问题—— 1.图标不隐藏 2. 当点击另一个图像/点时，点/图像无法再次点击

提供视频以便更好地理解 ( https://streamable.com/ab999 )

在这个视频中你会看到我有一个点/图像及其各自的文本(构建)我已经像页面加载时一样对其进行编码它会自动被点击并且动画发生。(这是应该发生的事情)

当我点击任何其他图像/点(构建文本图像上的黑色图标/点未隐藏)时，您会看到构建文本图像/图标无法再次点击，因为黑色/图标在那里并使其不可点击

我正在尝试的 Jquery 是这个

$(function() {
  if($("#img1").click()){
    $(".icon").css("display","block");
    console.log("if");
  }
  else{
    $(".icon").css("display","none");
    console.log("else");
  }
});

我已经把 console.log 只是为了检查，但我的控制台只显示 ("if") 永远不会去 ("else")

img1是点/图片的id

.icon 是黑色图标类，位于构建图像之上，具有 css 属性 position:relaive

<li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li>

我希望当我点击任何其他图像/点时黑色图标隐藏(不显示)并且当我再次点击点/图像(构建)时它再次出现

Answer 1

您必须向这样的图像添加 Action 点击。

$('img').click(function () { 
  if (this.id === 'img1') { 
    $(".icon").css("display","block"); 
  } else { 
    $(".icon").css("display","none"); 
  } 
})

请注意，$("#img1").click() 将触发点击。