如何在jquery上控制加法和减法

how to control addition and substraction on jquery?

本文关键字：控制 jquery      更新时间：2023-09-26

我试着按按钮计数我想添加if else语句如果.kisi-sayi-text值= 0不添加，但我的代码没有任何变化

HTML 

<div class="count-box yetiskin-count">
        <span class="count-text">Yetişkin:</span>
        <span class="kisi-down"></span>
        <span class="kisi-sayi-text">1</span>
        <span class="kisi-up"></span>
    </div>
JQUERY 

$('.yetiskin-count > .kisi-up').on("click",function(){
  var topParents = $(this).parents(".yetiskin-count"),
      kisiSayiText   = topParents.find(".kisi-sayi-text"),
      kisiSayiNumber = kisiSayiText.html(parseInt($(".kisi-sayi-text").html())+1);
     if(kisiSayiNumber<0){
        return false;
     }
});

问题不在.kisi-up点击事件中，您应该查看.kisi-down点击处理程序，因为它处理减法，因此当它达到0时它将停止减法。

$('.yetiskin-count > .kisi-up').on("click",function(){
     var topParents = $(this).parents(".yetiskin-count"),
       kisiSayiText = topParents.find(".kisi-sayi-text"),
       kisiSayiNumber = parseInt($(".kisi-sayi-text").html());
     kisiSayiText.html(kisiSayiNumber + 1);
});
$('.yetiskin-count > .kisi-down').on("click",function(){
     var topParents = $(this).parents(".yetiskin-count"),
       kisiSayiText = topParents.find(".kisi-sayi-text"),
       kisiSayiNumber = parseInt($(".kisi-sayi-text").html());
     if(kisiSayiNumber <= 0){
        return false;
     }
     kisiSayiText.html(kisiSayiNumber - 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="count-box yetiskin-count">
        <span class="count-text">Yetişkin:</span>
        <span class="kisi-down">&lt;</span>
        <span class="kisi-sayi-text">1</span>
        <span class="kisi-up">&gt;</span>
    </div>

比较:

$('.yetiskin-count > .kisi-up').on("click",function(){
  var topParents = $(this).parents(".yetiskin-count"),
      kisiSayiText   = topParents.find(".kisi-sayi-text"),
      kisiSayiNumber = kisiSayiText.html(parseInt($(".kisi-sayi-text").html())+1);
     // kisiSayiNumber is a jQuery object, not a number so there is no point comparing it with 0
     if(kisiSayiNumber<0){
        return false;
     }
});
与这个:

$('.yetiskin-count > .kisi-up').on("click",function(){
  var topParents = $(this).parents(".yetiskin-count"),
      kisiSayiText = topParents.find(".kisi-sayi-text"),
      kisiSayiNumber = parseInt(kisiSayiText.html());
      // if the current running number is less than or equal to 0 then don't add
      if (kisiSayiNumber <= 0)
          return false;
      kisiSayiText.html(kisiSayiNumber + 1);
});

请替换这一行

kisiSayiNumber = kisiSayiText.html(parseInt($(".kisi-sayi-text").html())+1);


kisiSayiNumber = kisiSayiText.html(parseInt($(".kisi-sayi-text").text())+1);

我将按照你想要的方式开始添加

问题出在你的<span class="kisi-up"></span> ..试着放一些数据。

例如

<span class="kisi-up">Click Me</span>

因为你不能点击span kisi-up 

 $('.yetiskin-count > .kisi-up').on("click",function(){
  var topParents = $(this).parents(".yetiskin-count"),
      kisiSayiText   = topParents.find(".kisi-sayi-text"),
      kisiSayiNumber = kisiSayiText.html(parseInt($(".kisi-sayi-text").html())+1);
     if(kisiSayiNumber<0){
        return false;
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="count-box yetiskin-count">
        <span class="count-text">Yetişkin:</span>
        <span class="kisi-down"></span>
        <span class="kisi-sayi-text">1</span>
        <span class="kisi-up">Click Me</span>
    </div>

  $('.yetiskin-count > .kisi-up').on("click",function(){
  
  var topParents = $(this).parents(".yetiskin-count");
    var  kisiSayiText   = topParents.find(".kisi-sayi-text");
      if($(".kisi-sayi-text").html()<=0){
        return false;
     };
      kisiSayiNumber = kisiSayiText.html(parseInt($(".kisi-sayi-text").html())+1);
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="count-box yetiskin-count">
        <span class="count-text">Yetişkin:</span>
        <span class="kisi-down"></span>
        <span class="kisi-sayi-text">1</span>
        <span class="kisi-up">click here</span>
    </div>

你好,您需要在span标记中添加一些内容以供单击，并确保包含JQuery库。您可以运行该代码片段来检查功能。我希望这能解决你的问题。编码快乐! !

相关文章：