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

Posted 2023-05-08

【中文标题】为啥这个 scrollLeft JS 函数不能在我的本地 wordpress 网站上运行？

【英文标题】：Why isn't this scrollLeft JS function working on my local wordpress site?为什么这个 scrollLeft JS 函数不能在我的本地 wordpress 网站上运行？

【发布时间】：2021-11-06 23:45:05

【问题描述】：

它在 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>

【参考方案1】：

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