javascript - 单击和滚动顶部条件不能同时工作

Question

我对这个运算符有疑问。我想要这个(实际上很简单):

1. 如果 .scrollTop() 大于或等于 1480 并且 $(".promotion-video .play-button") 已点击
2. 添加一个包含一些图像的 div block

屁股! 点击条件不起作用。为什么我亲爱的开发者兄弟？请赐教。

<div class="promotion-video">
        <div
          class="row border-lines flex-column justify-content-center align-items-center mx-0 overflow-hidden"
        >
          <img class="play-button" src="/src/assets/play-button.png" alt />
          <img class="text" src="/src/assets/promotion-video.png" alt />
        </div>
      </div>

$(document).on("scroll", function() {
        if ($(this).scrollTop() >= 1480 && $(".promotion-video .play-button").click()) {
            $(".promotion-video").html(`this is bullshit<div class="row border-lines flex-column justify-content-center align-items-center mx-0 overflow-hidden">
            <img class="play-button" src="/src/assets/play-button.png" alt="" />
            <img class="text" src="/src/assets/promotion-video.png" alt="" />
          </div>`);
        } else {
            $(".promotion-video .play-button").on("click", change);
        }
    })

Answer 1

您应该在点击事件上添加一个事件监听器，如下所示:

$(".promotion-video .play-button").on("click", function() {
        if ($(document).scrollTop() >= 1480) {
            $(".promotion-video").html(`this is bullshit<div class="row border-lines flex-column justify-content-center align-items-center mx-0 overflow-hidden">
            <img class="play-button" src="/src/assets/play-button.png" alt="" />
            <img class="text" src="/src/assets/promotion-video.png" alt="" />
          </div>`);
        } else {
            change();
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="promotion-video">
        <div
          class="row border-lines flex-column justify-content-center align-items-center mx-0 overflow-hidden"
        >
          <img class="play-button" src="/src/assets/play-button.png" alt />
          <img class="text" src="/src/assets/promotion-video.png" alt />
        </div>
      </div>