点击和滚动停止条件不同时工作

Question

我对这个运算符有问题。我想要这个(实际上很容易(:

1. 如果.scrollTop((大于或等于1480且$(".促销视频.播放按钮"(已点击
2. 添加一个具有一些图像的div块

BUTTT单击条件不起作用为什么是我亲爱的开发者兄弟？请开导我。

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