试图通过CSS指针事件禁用点击

Question

我目前正在开发一个具有幻灯片放映功能的项目，该项目允许用户根据他们单击的箭头向左或向右滑动。

滑块本身工作正常。 我现在想要实现的是禁用相应的箭头按钮，该按钮一旦滑到尽头就会触发。 此刻，当我单击箭头时，尽管div到达了终点，但它继续滑动，并且由于没有内容，因此当然没有显示任何内容。 我目前正在使用CSS指针事件道具来尝试禁用它。

一如既往地感谢所有帮助和回应。

 if ($(".topsellingrange").css("left", "0%")) { $("#left-scroll).css("pointer - events "," none "); } if ($(".topsellingrange").css("left", "-300%")) { $("#right-scroll).css("pointer - events "," none "); } $(".topsellingrange").animate({ left: "+=100%" }, 900, function() { }) }) $("#right-scroll").click(function() { $(".topsellingrange").animate({ left: "-=100%" }, 900, function() { }) }) 

 .protein-products { width: 100%; position: relative; justify-content: space-around; height: 85vh; overflow: hidden; } .scroll-div { width: 100%; text-align: center; } .scrolling-icon { font-size: 1em; color: green; display: inline-block; margin: 1em 13em; } .topsellingrange { width: 400%; display: flex; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="protein-products"> <h1>TOP SELLING PROTEIN RANGE</h1> <div class="scroll-div"> <span id="left-scroll" class="scrolling-icon"><i class="fas fa-chevron-left"></i></span> <span id="right-scroll" class="scrolling-icon"><i class="fas fa-chevron-right"></i></span> </div> <div class="topsellingrange"> <div class="protein-product"> <img src="images/index/protein1.jpg"> <img src="images/5star.jpg"> <span class="heading">100% Whey Protein Professional</span> <span class="product-price">&pound26.39</span> <button class="more-info">MORE INFO</button> <button id="product1" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein2.jpg"> <img src="images/5star.jpg"> <span class="heading">MUSCLE MILK (Vanilla) 1120g</span> <span class="product-price">&pound31.20</span> <button class="more-info">MORE INFO</button> <button id="product2" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein3.jpg"> <img src="images/5star.jpg"> <span class="heading">Organic Protein Plant-Based Protein Powder</span> <span class="product-price">&pound13.78</span> <button class="more-info">MORE INFO</button> <button id="product3" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein4.jpg"> <img src="images/5star.jpg"> <span class="heading">Combat 100% Ultra Premium Whey</span> <span class="product-price">&pound12.99</span> <button class="more-info">MORE INFO</button> <button id="product4" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein5.jpg"> <img src="images/5star.jpg"> <span class="heading">Builder's Protein Bars Box Chocolate - 12 Bars</span> <span class="product-price">&pound15.39</span> <button class="more-info">MORE INFO</button> <button id="product5" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein6.jpg"> <img src="images/5star.jpg"> <span class="heading">Ultimate Nutrition: CarneBOLIC protein</span> <span class="product-price">&pound42.99</span> <button class="more-info">MORE INFO</button> <button id="product6" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein7.jpg"> <img src="images/5star.jpg"> <span class="heading">Pure Protein: 100% Whey (vanilla)</span> <span class="product-price">&pound18.99</span> <button class="more-info">MORE INFO</button> <button id="product7" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein8.jpg"> <img src="images/5star.jpg"> <span class="heading">BodyLab: Fat Burning Protein (Vanilla)</span> <span class="product-price">&pound16.99</span> <button class="more-info">MORE INFO</button> <button id="product8" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein9.jpg"> <img src="images/5star.jpg"> <span class="heading">Plant Based: Tone It Up Protein</span> <span class="product-price">&pound12.99</span> <button class="more-info">MORE INFO</button> <button id="product9" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein10.jpg"> <img src="images/5star.jpg"> <span class="heading">Olly: Nourishing Smoothie Protein</span> <span class="product-price">&pound17.99</span> <button class="more-info">MORE INFO</button> <button id="product10" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein11.jpg"> <img src="images/5star.jpg"> <span class="heading">Premier Protein x 4 (Chocolate)</span> <span class="product-price">&pound11.99</span> <button class="more-info">MORE INFO</button> <button id="product11" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein12.jpg"> <img src="images/5star.jpg"> <span class="heading">Orgain: Organic Slim Protein</span> <span class="product-price">&pound16.49</span> <button class="more-info">MORE INFO</button> <button id="product12" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein13.jpg"> <img src="images/5star.jpg"> <span class="heading">Only Protein: Whey Vanilla</span> <span class="product-price">&pound15.99</span> <button class="more-info">MORE INFO</button> <button id="product13" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein14.jpg"> <img src="images/5star.jpg"> <span class="heading">Muscle Milk: Strawberry Whey</span> <span class="product-price">&pound21.99</span> <button class="more-info">MORE INFO</button> <button id="product14" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein15.jpg"> <img src="images/5star.jpg"> <span class="heading">Kodiak Cakes: Protein Flapjack On The Go x 12</span> <span class="product-price">&pound19.99</span> <button class="more-info">MORE INFO</button> <button id="product15" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein16.jpg"> <img src="images/5star.jpg"> <span class="heading">EAS: 100% Whey Protein 907g Chocolate</span> <span class="product-price">&pound12.99</span> <button class="more-info">MORE INFO</button> <button id="product16" class="shopnow">ADD TO BASKET</button> </div> </div> </section> 

Answer 1

您在if条件下错误地使用了.css()方法。 如果您需要检查是否应用了特定的CSS样式，则应使用- $(el).css('css-property') === 'value'

在您的代码中，您可以像检查-

if ($(".topsellingrange").css("left") === "0%") {
  $("#left-scroll").css("pointer-events","none");
}

if ($(".topsellingrange").css("left") === "-300%") {
  $("#right-scroll").css("pointer-events","none");
}

您可以在代码中解决很多问题，或者通过其他方式处理禁用问题，但这可以帮助您了解问题是否已在代码中得到解决。 我的建议是，当有许多插件可以很好地满足您的需要时，不要为这种事情而重新发明轮子，除非您尝试自己学习或构建一个插件！