停止 JavaScript 弹出窗口激活每个环形图标直到单独单击

Question

我对此很陌生，非常感谢您提供的任何帮助。我创建了一个弹出窗口以在单击图标时显示其他详细信息。我有多张带有图标的卡片，显示与给定卡片有关的不同详细信息。该图标仅在 mouseenter 上可见。弹出窗口正在点击，并在再次点击时关闭。问题是，当单击一个图标时，它会激活所有图标。如果不重新单击关闭，则每张卡片的弹出窗口在鼠标输入时可见。

我试图只激活点击的图标，同时让其他图标保持关闭直到被选中。

这是我的弹出窗口：

<div class="sponsor-index--PopUp" onclick="sponsorPop()">
   <button class="sponsor-index--iconBtnMini">
      <i id="details" class="fa fa-info-circle fa-2x"></i>
   </button>
   <span class="sponsor-index--PopUpText">
      <span class="sponsor-index--details">
         <strong>Name:</strong><br /> @Html.DisplayFor(modelItem => item.Name)<br />
         <strong>Dimensions</strong><br /> @Html.DisplayFor(modelItem => item.Photo.OriginalWidth) x 
            @Html.DisplayFor(modelItem => item.Photo.OriginalHeight) (Width x Height)<br />
         <strong>Link:</strong><br /> <a href="@item.Link" target="_blank">@Html.DisplayFor(modelItem => 
            item.Link)</a>
       </span>
   </span>
</div>

这是我的脚本：

<script>
//Pop up for details icon
function sponsorPop() {
   var popup = document.getElementsByClassName("sponsor-index--PopUpText");

   for (let i = 0; i < popup.length; i += 1) {
      popup.item(i).classList.toggle("show");
      }
   }
</script>

Answer 1

将点击的 DIV 作为参数传递给函数，然后在 DIV 中搜索图标。

div class="sponsor-index--PopUp" onclick="sponsorPop(this)">
   <button class="sponsor-index--iconBtnMini">
      <i id="details" class="fa fa-info-circle fa-2x"></i>
   </button>
   <span class="sponsor-index--PopUpText">
      <span class="sponsor-index--details">
         <strong>Name:</strong><br /> @Html.DisplayFor(modelItem => item.Name)<br />
         <strong>Dimensions</strong><br /> @Html.DisplayFor(modelItem => item.Photo.OriginalWidth) x 
            @Html.DisplayFor(modelItem => item.Photo.OriginalHeight) (Width x Height)<br />
         <strong>Link:</strong><br /> <a href="@item.Link" target="_blank">@Html.DisplayFor(modelItem => 
            item.Link)</a>
       </span>
   </span>
</div>

<script>
//Pop up for details icon
function sponsorPop(div) {
    var popup = div.querySelector(".sponsor-index--PopUpText");
    if (popup) {
        popup.classList.toggle("show");
    }
}
</script>

停止 JavaScript 弹出窗口激活每个环形图标直到单独单击

Stop JavaScript Popup From Activating Every Looped Icon Until Individually Clicked

javascript

popup