CODEWITHSUNDEEP
jquery
vzhen
vzhen

Reputation: 11157

increment and decrement between 2 buttons

I have 2 buttons and these 2 buttons will increase the total number of clicks. (The total is count separately) An user only allow to select 1 of them which means if user has previously clicked on buttonA and click buttonB again. ButtonA will - 1 and ButtonB will + 1.

I have following codes and there is a problem. If no clicked before the buttons would be 

buttonA (0) - buttonB (0).

If an user click buttonA suppose to be buttonA (1) - buttonB (0) but the following codes show

buttonA (1) - buttonB (-1)

What I want is, the button ONLY decrease the button which user clicked it before. And how can I improve my code? It seems messy.

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

Updated - demo

Upvotes: 1

Views: 1041

Answers (3)

charlietfl
charlietfl

Reputation: 171669

I created a single function that will toggle the value of the badge. If increment is less than zero it prints zero.

Also note is simpler to add another class to the elements than use 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/

It's not 100% clear what behavior you want as far as user being able to keep adding or if you will update the html each page load with active class if user has already clciked an answer

Upvotes: 0

David Kiger
David Kiger

Reputation: 1996

I tried to keep your HTML structure pretty similar, but I completely hosed the JS. You'll need to refit your active classes if necessary, because without any CSS I wasn't sure what they were being used for (if anything)

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

Demo working at http://jsfiddle.net/TtkDG/3/, with multiple instances of buttonA and buttonB.

EDIT: To be clear, I did have to wrap the buttons in a containing div with a question identifier. Just make sure you don't miss that.

Upvotes: 1

Mircea Sandu
Mircea Sandu

Reputation: 926

I would suggest using a variable didtheuserclick which is false in the beginning and check if the variable is true than subtract, else ignore the subtract part, and set the variable to true at the end of the click function, I made a demo, http://jsfiddle.net/TtkDG/1/

Also you could use a simple integer variable with increment on each click and check if the variable is equal to 1, it's the same logic but if using it just for this is pointless to increment a variable, especially if you are going to reach high numbers.

hope it helps!

Upvotes: 0

Related Questions