jQuery отключить функцию щелчка, когда значение получает 0

Я пробовал много различных методов и переписывал свой код, чтобы достичь чего-то, что я чувствую, довольно просто, но я не могу, кажется, получить его.

У меня есть два инкремента/декремента buttons, но я хочу отключить clickфункцию на вычитанииbutton, когда значение достигает 0как не вводить отрицательные числа.

В настоящее время на моем jsfiddle у меня есть калькулятор работает, однако , когда я пытаюсь отключить вычитаниеbutton, когда значение0, оно buttonполностью отключает, даже когда значение больше не 0. Похоже, jQuery не проверяет, изменилось ли значение.

Есть идеи, как это исправить? Спасибо!

Пример здесь:
https://jsfiddle.net/jony000/frupofqe/22/

<p align="center">
How often do you shower?
</p>
<table class="shower">
    <tbody>
        <tr>
          <td class="rate-minus">
                -
            </td>
            <td class="shower-rate">0</td>
            <td class="rate-plus">
                +
            </td>
        </tr>
    </tbody>
</table>
<p align="center">
  Times a Day
</p>

JQuery

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

plus.click(function() {
    showers++;
    rate.html(showers);
})

minus.click(function() {
    showers--;
    rate.html(showers);
})

/*if (showers == 0) {
    minus.css("pointer-events","none");
    } else{
    minus.css("pointer-events", "auto");
}*/

5 ответов

  1. Вы можете просто настроить вызов, который проверит данное условие (если ваше значение 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 rateMinus = $(".rate-minus");
        var ratePlus = $(".rate-plus");
        var rate = $(".shower-rate");
        var value = 0;
    
    
        ratePlus.click(function() {
          value++;
          UpdateRate();
        })
    
         rateMinus.click(function() {
          value--;
          UpdateRate();
        })
    
        function UpdateRate() {
          debugger;
          // This will disable your button if showers is 0
          rateMinus.css("pointer-events", value === 0 ? "none" : "auto");
          rate.html(value);
        }
    table {
      margin: auto;
      color: #cecece;
    }
    .shower td {
      padding: 10px;
    }
    .rate-minus,
    .rate-plus,
    .period-minus,
    .period-plus {
      width: 50px;
      height: 50px;
      background: #a8d6ff;
      border-radius: 100%;
      text-align: center;
      font-size: 24px;
      color: black;
      cursor: pointer;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    How often do you shower?
    <table class="shower">
      <tbody>
        <tr>
          <td class="rate-minus" id="test">
            -
          </td>
          <td class="shower-rate">0</td>
          <td class="rate-plus">
            +
          </td>
        </tr>
    
      </tbody>
    
    </table>
    
    <p align="center">
      Times a
    </p>
    <table class="shower">
      <tbody>
        <tr>
          <td class="period-minus">
            -
          </td>
          <td class="shower-period">
            Day
          </td>
          <td class="period-plus">
            +
          </td>
        </tr>
    
      </tbody>
    </table>

  2. Вы должны проверить, является ли showerноль внутри прослушивателя clickсобытий для minusэлемента:

    minus.click(function() {
      rate.html(--showers);
      if (showers === 0) {
        minus.css("pointer-events", "none");
      } else{
        minus.css("pointer-events", "auto");
      }
    });
    
  3. Проверьте на 0 перед уменьшением. Я считаю, что его более четко читаемым, чтобы просто не уменьшать его, а не отключать контроль, если у вас не было другой логики, которая не показана в демо.

    var showers = 0;
    var plus = $(".rate-plus");
    var minus = $(".rate-minus");
    var rate = $(".shower-rate");
    
    plus.click(function(){
      showers++;
      rate.html(showers);
    })
    
    minus.click(function(){
      if (showers <= 0)
          return;
      showers--;
      rate.html(showers);
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <p align="center">
    How often do you shower?
    </p>
    <table class="shower">
        <tbody>
            <tr>
              <td class="rate-minus">
                    -
                </td>
                <td class="shower-rate">0</td>
                <td class="rate-plus">
                    +
                </td>
            </tr>
        </tbody>
    </table>
    <p align="center">
      Times a Day
    </p>

  4. вам просто нужно переместить весь 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
    })
    
  5. вы можете сделать что-то подобное.

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