Question

如果结果小于div#value，如何向0添加课程？

我需要添加两个类：一个如果值小于0，另一个如果它大于0。

我尽我所能，所以我很感激你的帮助！提前谢谢！

＆＃13;

$(function() {

  var valueElement = $('#value');

  function incrementValue(e) {
    valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment));
    return false;
  }

  $('#plus').bind('click', {
    increment: 1
  }, incrementValue);

  $('#minus').bind('click', {
    increment: -1
  }, incrementValue);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="minus" href="#">-</a>
<span id="value">0</span>
<a id="plus" href="#">+</a>

＆＃13;

Answer 1

在计算时，可以使用.toggleClass( className, state )根据条件添加/删除CSS类。

var value = Math.max(parseInt(valueElement.text()) + e.data.increment);
valueElement.text(value).toggleClass('negative', value < 0).toggleClass('positive', value > 0);

$(function() {

  var valueElement = $('#value');
 
  function incrementValue(e) {
    var value = Math.max(parseInt(valueElement.text()) + e.data.increment);
    valueElement.text(value).toggleClass('negative', value < 0).toggleClass('positive', value > 0);

    return false;
  }

  $('#plus').on('click', {
    increment: 1
  }, incrementValue);

  $('#minus').on('click', {
    increment: -1
  }, incrementValue);

});

.positive {
  color: green 
}
.negative {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="minus" href="#">-</a>
<span id="value">0</span>
<a id="plus" href="#">+</a>

对于多个元素

$(function() {

  function incrementValue(e) {
    var valueElement = $(e.target).closest('.container').find('.value');
    
    var value = Math.max(parseInt(valueElement.text()) + e.data.increment);
    valueElement.text(value).toggleClass('negative', value < 0).toggleClass('positive', value > 0);

    return false;
  }

  $('.plus').on('click', {
    increment: 1
  }, incrementValue);

  $('.minus').on('click', {
    increment: -1
  }, incrementValue);

});

.positive {
  color: green
}

.negative {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <a class="minus" href="#">-</a>
  <span class="value">0</span>
  <a class="plus" href="#">+</a>
</div>

<div class="container">
  <a class="minus" href="#">-</a>
  <span class="value">0</span>
  <a class="plus" href="#">+</a>
</div>

Answer 2

下面的逻辑应该有效。

您需要返回更改的值。并且在绑定函数中有一个回调函数，您在其中调用已更改的函数和sencond函数，该函数根据新值添加或删除类。

$(function(){

var valueElement = $('#value');
function incrementValue(e){
   var val =  valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment));
    return val;
};

function triggerChange(v) {
    if(v < 0 ) {
        $('#value').addClass('<class-name>');
        //likewise remove the other class
    }
    else if (v > 0) {
        $('#value').addClass('<class-name>');
        //likewise remove other class
    }
    else {
        // remove all classes on zero
    }
};
$('#plus').bind('click', {increment: 1}, function(){
    var val = incrementValue();
    triggerChange(val);
});

$('#minus').bind('click', {increment: -1}, function(){
    var val = incrementValue();
    triggerChange(val);
});

}）;

如果小于0，则添加class

2 个答案: