click and scrolltop条件不能同时工作

Question

我对此操作员有疑问。我想要这个（实际上很容易）：

1. 如果。scrollTop（）大于或等于1480 和 $（“。promotion-video .play-button”）已单击]
2. 添加具有某些图像的div块

按钮！ 单击条件不起作用。为什么我亲爱的开发人员兄弟？请赐教。

<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

您宁愿在单击event时添加事件监听器，如下所示：

$(".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>