javascript - 尝试通过 CSS 指针事件禁用点击

Question

我目前正在开发一个元素，该元素有一个幻灯片，允许用户向左或向右滑动，具体取决于他们点击的箭头。

slider 本身工作正常。我现在想要实现的是禁用相应的箭头按钮，一旦它到达终点就会触发幻灯片。目前，当我单击箭头时，尽管 div 已到达其末端，但它继续滑动，当然没有显示任何内容，因为那里什么也没有。我目前正在使用 CSS pointer-event 属性试图禁用它。

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

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");
}

您可以在代码中修复更多问题或以其他方式处理禁用问题，但这应该有助于您了解您的问题是否已在代码中修复。我的建议是，当有很多插件可以很好地处理这些问题时，不要为这些事情重新发明轮子，除非你想自己学习或构建一个!