Javascript 当值变为0时，jQuery禁用单击函数

我一直在尝试许多不同的方法，并重写我的代码，以实现一些我觉得很简单但似乎无法实现的东西

我有两个递增/递减

按钮

s，但我想在值达到

0

时禁用减法

按钮上的
单击
功能，以避免输入负数

目前在我的JSFIDLE上，我的计算器正在工作，但是当我尝试禁用值为
0
时的减法
按钮时，它会完全禁用
按钮
，即使值不再为
0
。jQuery似乎没有检查值是否已更改

有没有办法解决这个问题？谢谢

示例如下：

您只需设置一个检查给定条件（如果值为0）的调用，并使用该调用切换减法按钮是否通过三元操作启用或禁用：

minus.css("pointer-events",showers === 0 ? "none" : "auto");

然后，您只需在发生以下任一事件时检查该场景：

plus.click(function(){
   showers++;
   UpdateRate();
})

minus.click(function(){
   showers--;
   UpdateRate();
})

function UpdateRate() {
   // This will disable your button if showers is 0
   minus.css("pointer-events",showers === 0 ? "none" : "auto");
   rate.html(showers);
}

示例



var ratem负号=$（“.ratem负号”）；
var ratePlus=$（“.rate plus”）；
风险值率=$（“.shower rate”）；
var值=0；
ratePlus.单击（函数（）{
值++；
UpdateRate（）；
})
Rate减号。单击（函数（）{
价值--；
UpdateRate（）；
})
函数UpdateRate（）{
调试器；
//如果淋浴为0，则此按钮将禁用
css（“指针事件”，值===0？“无”：“自动”）；
html（值）；
}
表格{
保证金：自动；
颜色：#cecece；
}
.淋浴{
填充：10px；
}
.差饷，
.加价，
.句号减，
.句号加号{
宽度：50px；
高度：50px；
背景：#a8d6ff；
边界半径：100%；
文本对齐：居中；
字体大小：24px；
颜色：黑色；
光标：指针；
}

你多久洗一次澡？
-
0
+

一次

-
白天
+
您必须检查
元素的
事件侦听器中的
淋浴
是否为零

minus.click(function() {
  rate.html(--showers);
  if (showers === 0) {
    minus.css("pointer-events", "none");
  } else{
    minus.css("pointer-events", "auto");
  }
});

在递减之前检查0。我相信它更清晰易读，只是不减少它，而不是禁用控制，除非你有其他逻辑没有显示在演示


var阵雨=0；
var plus=$（“.rate plus”）；
var减号=$（“.rate减号”）；
风险值率=$（“.shower rate”）；
plus.单击（函数（）{
淋浴++；
html（淋浴）；
})
减。单击（函数（）{
if（showers您只需要移动函数底部的整个
if
块……或者更好，创建一个新函数并在其他函数中调用该函数。下面是一个示例

var showers = 0;
var plus = $(".rate-plus");
var minus = $(".rate-minus");
var rate = $(".shower-rate");

//This is new
var checkForZero = function() {
    if (showers == 0) {
        minus.css("pointer-events","none");
    } else {
        minus.css("pointer-events", "auto");
    }
};

plus.click(function(){
showers++;
rate.html(showers);
checkForZero(); //call new function
})

minus.click(function(){
showers--;
rate.html(showers);
checkForZero(); //call new function
})

你可以这样做

var rateMinus = $(".rate-minus");

var value = 0;
updateRateMinus(); // update on initial load

$(".rate-plus").click(function() {
  parseInt($(".shower-rate").text(value + 1));
  value = value + 1;
  updateRateMinus();
});
$(".rate-minus").click(function() {
  parseInt($(".shower-rate").text(value - 1));
  value = value - 1;
  updateRateMinus();

});

function updateRateMinus() {
  if ($(".shower-rate").text() == 0) {
    rateMinus.css('pointer-events', 'none');
  } else {
    rateMinus.css("pointer-events", "auto");
  }

}

为什么不降到0以下呢？似乎要禁用该控件，然后您必须随时检查它的值是否再次高于0。对于业务逻辑中可以轻松处理的事情来说，似乎太复杂了。
var showers = 0;
var plus = $(".rate-plus");
var minus = $(".rate-minus");
var rate = $(".shower-rate");

//This is new
var checkForZero = function() {
    if (showers == 0) {
        minus.css("pointer-events","none");
    } else {
        minus.css("pointer-events", "auto");
    }
};

plus.click(function(){
showers++;
rate.html(showers);
checkForZero(); //call new function
})

minus.click(function(){
showers--;
rate.html(showers);
checkForZero(); //call new function
})

var rateMinus = $(".rate-minus");

var value = 0;
updateRateMinus(); // update on initial load

$(".rate-plus").click(function() {
  parseInt($(".shower-rate").text(value + 1));
  value = value + 1;
  updateRateMinus();
});
$(".rate-minus").click(function() {
  parseInt($(".shower-rate").text(value - 1));
  value = value - 1;
  updateRateMinus();

});

function updateRateMinus() {
  if ($(".shower-rate").text() == 0) {
    rateMinus.css('pointer-events', 'none');
  } else {
    rateMinus.css("pointer-events", "auto");
  }

}