如何对 html 中的 2 个不同元素使用相同的 java 脚本

Question

我真的不懂java脚本和css，但现在我没有时间学习它，因为我有一个项目周五到期，所以我只想完成这个，但我没有选择。我还需要在这 2 个元素之上再做 2 个元素。

目前只有第一个 mp4 可以使用此功能，第二个则不行。老实说，样式表部分并不那么重要，我不介意它是否被删除，因为它很难做或其他什么。我没有能力实施其他人找到的其他解决方案，所以我问自己。

index.html：

    <div class="main-container">
        <div class="video-container">
          <video src="honda/honda adv.mp4"></video>
          <div class="hover-text active"><b>Autoturisme</b></div>
        </div>
      </div>
  
      <script src="main1.js"></script>


      <div class="main-container">
        <div class="video-container">
          <video src="honda/honda engine.mp4"></video>
          <div class="hover-text active"><b>Motoare</b></div>
        </div>
      </div>
  
      <script src="main2.js"></script>

style1.css（此时与style2.css相同的代码）：

.main-container {
  position: relative;
  width: 400px;
  top:-350px;
  left: -550px;
  margin: 40px auto;
  font-family: "Roboto", sans-serif;
  border-radius: 10px;
}

.video-container {
  position: relative;
}

.video-container video {
  width: 100%;
}

.video-container .hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(calc(-50% - 24px), -50%);
    background: #ff0019;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 4px 4px 50px -4px rgba(0, 0, 0, 0.8);
    opacity: 0;
    letter-spacing: 0.8px;
    transition: all 400ms ease;
  }
  
  .video-container .hover-text.active {
    opacity: 1;
    letter-spacing: 0;
    transform: translate(-50%, -50%);
  }

main1.js（与main2.js相同的代码）：

const video = document.querySelector(".video-container video");
const hoverText = document.querySelector(".video-container .hover-text");

video.addEventListener("mouseenter", () => {
  video.play();
  hoverText.classList.remove("active");
});

video.addEventListener("mouseleave", () => {
  video.pause();
  hoverText.classList.add("active");
});

Answer 1

您可以编写一个带有容器选择器的插件函数。

现在，将插件加载到 HTML 中，然后调用它。

.video-container > video { background: black; }

.hover-text.active { color: green; }

<!-- Load plugin -->
<!-- <script src="video-plugin.js"></script> -->
<script>
// Video Plugin
const VideoPlugin = (selector = '.video-container') => {
  const addListeners = (videoContainer => {
    const video = videoContainer.querySelector("video");
    const hoverText = videoContainer.querySelector(".hover-text");

    video.addEventListener("mouseenter", () => {
      video.play();
      hoverText.classList.add("active");
    });

    video.addEventListener("mouseleave", () => {
      video.pause();
      hoverText.classList.remove("active");
    });
  });
  document.querySelectorAll(selector).forEach(addListeners);
};
</script>

<div class="main-container">
  <div class="video-container">
    <video src="honda/honda adv.mp4"></video>
    <div class="hover-text"><b>Autoturisme</b></div>
  </div>
</div>
<div class="main-container">
  <div class="video-container">
    <video src="honda/honda engine.mp4"></video>
    <div class="hover-text"><b>Motoare</b></div>
  </div>
</div>

<!-- Execute the plugin -->
<script>
  VideoPlugin(); // The selector defaults to '.video-container'
</script>