为什么这个 scrollLeft JS 函数不能在我的本地 wordpress 网站上运行？

Question

它在 codepen 中运行良好，我在控制台中没有收到任何错误，并且其他 JS 在同一页面上工作。我正在使用页眉页脚代码管理器插件添加它。

mouseover 功能正在运行，在codepen 中，使用此scrollLeft 功能，我可以通过单击按钮滚动浏览我的画廊。但是在我本地托管的 wordpress 站点中，单击该按钮没有任何作用。在阅读了类似的问题并看到它对其他人有用之后，我将jQuery.noConflict 包含在内，但它对我没有用。代码如下：

const videos = document.querySelectorAll(".polystar");

for (const video of videos) {
  video.addEventListener('mouseover', function() {
    video.play()
  }, false);
  video.addEventListener('mouseout', function() {
    video.pause()
  }, false);
}
jQuery.noConflict();
(function($) {
  $(function() {
    var button = document.getElementById("slide");
    button.onclick = function() {
      document.getElementById("container").scrollLeft += 310;
    };
    var back = document.getElementById("slideBack");
    back.onclick = function() {
      document.getElementById("container").scrollLeft -= 310;
    };
  });
})(jQuery);

  div {
  position: relative;
  width: 300px;
  display: inline-block;
  margin: 0px;
}

#container {
  display: flex;
  overflow-x: auto;
  width: 900px;
  height: 160px;
  background-color: black;
}

video {
  width: 300px;
  height: auto;
}

img {
  width: 100%;
  width: 300px;
  height: auto;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.first:hover img {
  display: none;
}

.second:hover img {
  display: none;
}

.third:hover img {
  display: none;
}

.fourth:hover img {
  display: none;
}

.fifth:hover img {
  display: none;
}

.sixth:hover img {
  display: none;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translatex(-50%) translatey(-50%);
  font-size: 1em;
  color: white;
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1.5px 1px #000;
  font-family: arial;
}

.first:hover .overlay-text {
  display: none;
}

.second:hover .overlay-text {
  display: none;
}

.third:hover .overlay-text {
  display: none;
}

.fourth:hover .overlay-text {
  display: none;
}

.fifth:hover .overlay-text {
  display: none;
}

.sixth:hover .overlay-text {
  display: none;
}

#slideBack {
  position: absolute;
  display: inline-block;
  height: 20px;
  left: 0;
  right: 0;
  top: 30%;
  bottom: 0;
  z-index: 3;
  margin: 0;
}

#slide {
  position: absolute;
  display: inline-block;
  height: 20px;
  left: 60%;
  right: 0;
  top: 30%;
  bottom: 0;
  z-index: 3;
  margin: 0;
}

.first:hover,
.second:hover,
.third:hover,
.fourth:hover,
.fifth:hover,
.sixth:hover {
  animation: fadeIn .4s;
  -webkit-animation: fadeIn .4s;
  -moz-animation: fadeIn .4s;
  -o-animation: fadeIn .4s;
  -ms-animation: fadeIn .4s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  .overlayzinho {
    background-color: black;
    width: 300px;
    height: 190px;
    z-index: 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="first">
    <video muted="" loop="" class="polystar">
        <source src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ChWorker.mp4" type="video/mp4">
      </video>
    <img src="http://jackmullinkosson.local/wp-content/uploads/2021/08/MosEgo.jpg">
    <div class="overlay-text">"Group"</div>
  </div>
  <div class="second">
    <video muted="" loop="" class="polystar">
        <source src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&amp;profile_id=172&amp;oauth2_token_id=57447761" type="video/mp4">
      </video>
    <img src="http://jackmullinkosson.local/wp-content/uploads/2021/09/best-e1631205169449.png">
    <div class="overlay-text">"That's a Lie"</div>
  </div>
  <div class="third">
    <video muted="" loop="" class="polystar">
        <source src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ChWorker.mp4" type="video/mp4">
      </video>
    <img src="http://jackmullinkosson.local/wp-content/uploads/2021/08/birds-thumbnail.png">
    <div class="overlay-text">"Birds"</div>
  </div>
  <div class="fourth">
    <video muted="" loop="" class="polystar">
        <source src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ChWorker.mp4" type="video/mp4">
      </video>
    <img src="http://jackmullinkosson.local/wp-content/uploads/2021/08/Escalator.png">
    <div class="overlay-text">"Chinese Worker"</div>
  </div>
  <div class="fifth">
    <video muted="" loop="" class="polystar">
        <source src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&amp;profile_id=172&amp;oauth2_token_id=57447761" type="video/mp4">
      </video>
    <img src="http://jackmullinkosson.local/wp-content/uploads/2021/09/STILL-10-e1631205191960.png">
    <div class="overlay-text">"Divided"</div>
  </div>
  <div class="sixth">
    <video muted="" loop="" class="polystar">
        <source src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&amp;profile_id=172&amp;oauth2_token_id=57447761" type="video/mp4">
      </video>
    <img src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ForTheSetEdit5-e1631205229115.png">
    <div class="overlay-text">"For the Set"</div>
  </div>
</div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>

Answer 1

如果有人发现这个问题，问题是当我把它放在我的网站上时，我没有更改容器 ID，所以不起作用的 javascript 可能是指已经内置到我的 wordpress 中的预先存在的容器主题。当我将容器的 id 更改为唯一的值时，滚动按钮开始起作用。