試圖通過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");
}

您可以在代碼中解決很多問題，或者通過其他方式處理禁用問題，但這可以幫助您了解問題是否已在代碼中得到解決。 我的建議是，當有許多插件可以很好地滿足您的需要時，不要為這種事情而重新發明輪子，除非您嘗試自己學習或構建一個插件！