文章/答案/技术大牛

发布

社区首页 >问答首页 >单击多个链接显示多个图像

问单击多个链接显示多个图像
EN

Stack Overflow用户

提问于 2022-06-23 17:10:28

回答 3查看 43关注 0票数 1

当用户点击五个链接中的一个时，我试图让10个元素出现。为了节省时间，我只在这里展示两个。

这些“出现”元素需要以某种方式成为链接。

HTML - LINKS

        <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非常陌生，我相信我把这件事变得对我自己来说太复杂了。如果有人能告诉我如何使这个工作，这将是非常感谢！谢谢!

javascript

html

css

回答 3

Stack Overflow用户

发布于 2022-06-23 17:32:02

在您的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>

票数 1

Stack Overflow用户

发布于 2022-06-23 17:29:05

将要在div标记中显示的所有元素包装起来。例如：

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

在js中选择包围元素。

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

票数 0

Stack Overflow用户

发布于 2022-06-23 17:42:55

问题在JavaScript部分。您有多个script标记，每个标签都有elementToClick和elementToShow。当您在第二个(或任何其他) script标记中定义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
}

希望这能有所帮助！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72734116

复制

相似问题

问单击多个链接显示多个图像
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击多个链接显示多个图像EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击多个链接显示多个图像
EN