單擊多個鏈接時顯示多個影像-有解無憂

當用戶單擊五個鏈接之一時，我試圖讓 10 個元素出現。為了節省時間，我只在這里展示兩個。
這些“出現”的元素需要以某種方式成為鏈接。

HTML - 鏈接


        <a class="toggler1" href="#!"
          ><h1 class="website-titles">A boring website</h1></a


        <a class="toggler2" href="#!"
          ><h1 class="website-titles">Unoriginal.co.uk</h1></a

HTML - 出現的元素



      <a class="mydiv1" href="main.html">
        <div class="pop-up-1">
          <img
            class="mydiv1-bg"
            src="images/pink-pop-up.png"
            alt="pink pop up"
          />
          <img
            class="mydiv1-gif"
            src="images/spinning-star.gif"
            alt="animated star gif"
          />
        </div>
      </a>
      <a class="mydiv2" href="main.html">
        <div class="pop-up-2">
          <img
            class="mydiv2-bg"
            src="images/black-pop-up.png"
            alt="black pop up"
          />
          <img
            class="mydiv2-gif"
            src="images/stars.gif"
            alt="animated star background"
          />
          <h1 class="mydiv2-text">
            CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
          </h1>
        </div>

JS - 這是我的一個鏈接的 JS，為了方便起見，復制和粘貼 2 次（在實際代碼中，5 個鏈接是 5 次），每個標簽中的 elementToClick 設定為不同的類（toggler1、toggler2...等） . 如果我使用另一個 elementToShow（例如 mydiv2）再次復制并粘貼它，這將不起作用 - 只有一個元素會出現

 <script>
      var elementToClick = document.querySelector(".toggler1");

      var elementToShow = document.querySelector(".mydiv1");

      if (elementToClick) {
        elementToClick.addEventListener("click", showElement);
      }

      function showElement() {
        elementToShow.classList.add("show");
      }
    </script>
    <script>
      var elementToClick = document.querySelector(".toggler2");
      var elementToShow = document.querySelector(".mydiv1");

      if (elementToClick) {
        elementToClick.addEventListener("click", showElement);
      }

      function showElement() {
        elementToShow.classList.add("show");
      }
    </script>

CSS


/* POP UP 1 */

.mydiv1 {
  display: none;
}

.mydiv1.show {
  display: block;
}

/* POP UP 2 */

.mydiv2 {
  display: none;
}

.mydiv2.show {
  display: block;
}

感謝您查看這個爛攤子，我對 Javascript 非常陌生，我確信我讓這對自己來說不必要地復雜了。如果有人能告訴我如何讓這個作業，將不勝感激！謝謝！

uj5u.com熱心網友回復：

將要顯示的所有元素包裝在div標簽中。例如：

<div id="elementToShow">
      <a class="mydiv1" href="main.html">
      .....
</div>

在您的 js 中選擇該封閉元素

var elementToShow = document.querySelector("#elementToShow");

uj5u.com熱心網友回復：

在您的 Javascript 代碼中，在showElement中，使用elementToShow.classList.toggle("show");而不是elementToShow.classList.add("show");.

var elementToClick = document.querySelector(".toggler1");
  
var elementToShow = document.querySelector(".mydiv1");

if (elementToClick) {
  elementToClick.addEventListener("click", showElement);
}

function showElement() {
  elementToShow.classList.toggle("show");
}


var elementToClick = document.querySelector(".toggler2");
var elementToShow = document.querySelector(".mydiv1");

if (elementToClick) {
  elementToClick.addEventListener("click", showElement);
}

function showElement() {
  elementToShow.classList.toggle("show");
}

/* POP UP 1 */

.mydiv1 {
    display: none;
  }
  
  .mydiv1.show {
    display: block;
  }
  
  /* POP UP 2 */
  
  .mydiv2 {
    display: none;
  }
  
  .mydiv2.show {
    display: block;
  }

<a class="toggler1" href="#!"
  ><h1 class="website-titles">A boring website</h1>
</a>


<a class="toggler2" href="#!">
  <h1 class="website-titles">Unoriginal.co.uk</h1>
</a>


<a class="mydiv1" href="main.html">
  <div class="pop-up-1">
    <img
      class="mydiv1-bg"
      src="images/pink-pop-up.png"
      alt="pink pop up"
    />
    <img
      class="mydiv1-gif"
      src="images/spinning-star.gif"
      alt="animated star gif"
    />
  </div>
</a>
<a class="mydiv2" href="main.html">
  <div class="pop-up-2">
    <img
      class="mydiv2-bg"
      src="images/black-pop-up.png"
      alt="black pop up"
    />
    <img
      class="mydiv2-gif"
      src="images/stars.gif"
      alt="animated star background"
    />
    <h1 class="mydiv2-text">
      CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
    </h1>
  </div>
  </a>

uj5u.com熱心網友回復：

問題出在 JavaScript 部分。您有多個script標簽，每個標簽都有elementToClick和elementToShow。當您elementToClick在第二個（或任何其他）script標簽中定義時，之前的標簽將被覆寫。你只有一個elementToClick和一個elementToShow，而不是五個。所有其他變數和函式 (showElement) 也是如此。

另一條建議，嘗試使用可重用的代碼，并盡量不要復制和粘貼代碼，就像你在這里所做的那樣。您可以定義一個函式：

 function showElement(elementToShow) {
    elementToShow.classList.toggle("show");
  }

然后，您可以為五個元素中的每一個呼叫此函式：

let elements = [
    {toggler: 'toggler1', div: 'div1'},
    {toggler: 'toggler2', div: 'div2'},
    ...
];
for (let el of elements) {
    let toggler = document.querySelector(`.${el.toggler}`);
    let div = document.querySelector(`.${el.div}`);
    toggler.addEventListener('click', () => showElement(div)); // add a click listener with a corresponding div
}

希望這可以幫助！

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/494984.html

標籤：javascript html css

上一篇：將具有不同屬性名稱的物件陣列拆分為一個物件，并用給定名稱分隔它們

下一篇：號碼檢查失敗/被忽略。不和諧.js