приращение и декремент между 2 кнопками

Question

У меня есть 2 кнопки, и эти 2 кнопки увеличат общее количество кликов. (Общее количество подсчитывается отдельно) Пользователь разрешает выбирать только 1 из них, что означает, что пользователь ранее нажал кнопку buttonA и снова нажал кнопку B. 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); 
} 

Обновлено - demo

Answer 1

Я попытался сохранить вашу структуру HTML довольно схожей, но я полностью hosed 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 ,

EDIT: Чтобы быть ясным, мне пришлось обернуть кнопки в содержащем div с идентификатором вопроса. Просто убедитесь, что вы не пропустите это.

Answer 2

Я предложил бы использовать переменную didtheuserclick, который является ложным в начале и проверить, если переменная истинна, чем вычитать, иначе игнорировать вычитания часть, и установить переменную верно в конец функции щелчка, я сделал демо, http://jsfiddle.net/TtkDG/1/

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

надеюсь, что это поможет!

Answer 3

Я создал одну функцию, которая будет переключать значение 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; 
     }) 
    } 

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

Это не 100% ясно, что поведение, которое вы хотите, насколько пользователь в состоянии продолжать добавлять или если вы будете обновлять html каждую загрузку страницы с помощью класса active, если пользователь уже зарегистрировал ответ