1

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

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

buttonA (0) - buttonB (0).

如果用户单击 buttonA 假设是，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);
}

更新 -演示

4

3 回答 3

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

演示在http://jsfiddle.net/TtkDG/3/工作，具有 buttonA 和 buttonB 的多个实例。

编辑：为了清楚起见，我确实必须将按钮包装在带有问题标识符的包含 div 中。只要确保你不会错过它。

于 2013-02-16T18:19:27.957 回答
0

我建议使用一didtheuserclick开始为假的变量并检查变量是否为真而不是减法，否则忽略减法部分，并在点击功能结束时将变量设置为真，我做了一个演示，http：/ /jsfiddle.net/TtkDG/1/

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

希望能帮助到你！

于 2013-02-16T18:10:50.733 回答
0

我创建了一个函数来切换badge. 如果增量小于零，则打印零。

另请注意，向元素添加另一个类比使用更简单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;
      })
  }

演示：http: //jsfiddle.net/MZyxW/

就用户能够继续添加或者active如果用户已经单击答案，您是否会更新每个页面加载的 html 类，还不是 100% 清楚您想要什么行为

于 2013-02-16T19:03:50.110 回答