मैं इसके लिए काफी नया हूं और आपकी किसी भी मदद की बहुत सराहना करूंगा। जब कोई आइकन क्लिक किया जाता है तो मैंने अतिरिक्त विवरण प्रदर्शित करने के लिए एक पॉपअप बनाया है। मेरे पास आइकन के साथ कई कार्ड हैं जो दिए गए कार्ड से संबंधित विभिन्न विवरण प्रदर्शित करते हैं। आइकन केवल माउसएंटर पर दिखाई देता है। पॉपअप क्लिक पर काम कर रहा है, और यह फिर से क्लिक करने पर बंद हो जाता है। मुद्दा यह है कि जब एक आइकन पर क्लिक किया जाता है, तो वह सभी आइकन सक्रिय कर रहा होता है। यदि इसे बंद करने के लिए फिर से क्लिक नहीं किया जाता है, तो प्रत्येक कार्ड के पॉपअप माउसएन्टर पर दिखाई देने लगते हैं।

मैं केवल क्लिक किए गए आइकन को सक्रिय करने का प्रयास कर रहा हूं, जबकि अन्य को चयनित होने तक बंद कर दिया गया है।

यहाँ मेरा पॉपअप है:

<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>
0
Raven Sumner 18 फरवरी 2021, 20:33

1 उत्तर

सबसे बढ़िया उत्तर

क्लिक किए गए डीआईवी को फ़ंक्शन के तर्क के रूप में पास करें, और फिर डीआईवी के भीतर आइकन खोजें।

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>
0
Barmar 18 फरवरी 2021, 20:40