Question

我有2个按钮，这2个按钮会增加总点击次数。（总数是单独计算）用户只允许选择其中一个，这意味着用户之前是否曾点击过buttonA并再次单击buttonB。 ButtonA将 - 1和ButtonB将为+ 1.

我有以下代码，但有问题。如果在按钮之前没有点击

buttonA (0) - buttonB (0).

如果用户点击按钮，则假设为buttonA (1) - buttonB (0) 但以下代码显示

buttonA (1) - buttonB (-1)

我想要的是，按钮只会减少用户之前点击它的按钮。我怎样才能改进我的代码？看起来很乱。

$this.addClass('active').siblings().removeClass('active');
if ($this.is('span[name="ans_yes"]')) {
    yes_no = 1;
    currentVal = parseInt($this.find('.badge').html());
    $this.find('.badge').html(currentVal + 1);

    currentVal2 = parseInt($id.find('.ans-no').html());
    $id.find('.ans-no').html(currentVal2 - 1);
} else {
    yes_no = 0;
    currentVal = parseInt($this.find('.badge').html());
    $this.find('.badge').html(currentVal + 1);

    currentVal2 = parseInt($id.find('.ans-yes').html());
    console.log(currentVal2);
    $id.find('.ans-yes').html(currentVal2 - 1);
}

已更新 - demo

Answer 1

我试图保持你的HTML结构非常相似，但我完全没有使用JS。如果有必要，您需要重新安装active课程，因为没有任何CSS我不确定它们被用于什么（如果有的话）

var answered = {};  

$('.ans-yes-no').on('click', function(e) {
    var questionId = $(this).parent().attr('id');
    var currentAnswer = answered[questionId];
    var count = parseInt($(this).children('.badge').html());

    if ( currentAnswer == $(this).attr('name') ) {
        // Turning off
        $(this).children('.badge').html(count-1);
        delete answered[questionId];
    } else {
        // If we have a different answer, turn that off
        if ( currentAnswer ) {
            var oldCountEl = $("#"+questionId).children("span[name="+currentAnswer+"]").children('.badge');
            var oldCount = parseInt(oldCountEl.html());
            oldCountEl.html( oldCount - 1 );
        }

        // Turning on
        $(this).children('.badge').html(count+1);
        answered[questionId] = $(this).attr('name');
    }
});

使用buttonA和buttonB的多个实例在http://jsfiddle.net/TtkDG/3/处进行演示。

编辑：要清楚，我确实必须将按钮包含在带有问题标识符的包含div中。请确保你不要错过。

Answer 2

我建议使用变量didtheuserclick，它在开头是假的，检查变量是否为真，否则忽略减法部分，并在单击函数结束时将变量设置为true，我做了一个演示，http://jsfiddle.net/TtkDG/1/

你也可以使用一个简单的整数变量，每次点击都有增量，并检查变量是否等于1，它是相同的逻辑，但如果使用它只是为了增加变量是没有意义的，特别是如果你要去达到很高的数字。

希望它有所帮助！

Answer 3

我创建了一个单独的函数来切换badge的值。如果increment小于零，则打印为零。

另外请注意，为元素添加另一个类比使用name

更简单

 $('.ans-yes-no').on('click', function (e) {
      e.preventDefault();

      var $this = $(this),
          $otherBtn = $this.siblings('.ans-yes-no');

      var $btnWrap = $this.closest('.topic-footer');
      /* check if user has already selected, test "active" class length*/
      var alreadyVoted = $btnWrap.find('.active').length;
      if (alreadyVoted) {
          if ($this.is('.active')) {
              /* do nothing if already active?? */
              return;
          } else {
              $this.add($otherBtn).toggleClass('active');
          }
      } else {
          $this.addClass('active');
      }

      toggleValue($this, 'up');
      toggleValue($otherBtn, 'down');
  });

  function toggleValue($element, direction) {
      $element.find('.badge').text(function (i, currVal) {
          var value = parseInt(currVal, 10);
          direction == 'up' ? value++ : value--;
          return value > -1 ? value : 0;
      })
  }

DEMO：http://jsfiddle.net/MZyxW/

如果用户能够继续添加，或者如果用户已经使用active类加载html每个页面加载，那么你不想100％清楚你想要什么行为

两个按钮之间递增和递减

3 个答案: