2個按鈕之間的增量和減量

我有2個按鈕，這2個按鈕將增加總點擊次數。（總數單獨計數）用戶只允許選擇其中的1個，這意味着如果用戶以前點擊過buttonA並再次點擊buttonB。 ButtonA將 - 1和ButtonB將+1。2個按鈕之間的增量和減量

我有以下代碼，並且存在問題。如果沒有按鈕之前單擊將

buttonA (0) - buttonB (0).

如果用戶點擊按鈕a假設是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

來源

2013-02-16 vzhen

在jsfiddle.net創建一個演示與相應的HTML – charlietfl 2013-02-16 17:11:04

@charlietfl我添加了演示 – vzhen 2013-02-16 17:37:09

頁面上是否會出現多個buttonA和buttonB，或者每個只有一個？值是隻有0還是1？我們可以使用更多的細節來弄清楚你實際要做什麼。 – 2013-02-16 17:41:07

我試着讓你的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/工作，用按鈕a和buttonB的多個實例。

編輯：爲了清楚起見，我確實必須將按鈕包含在帶有問題標識符的div中。只要確保你不會錯過。

來源

2013-02-16 18:19:27

我認爲這是我想要的。 – vzhen 2013-02-17 08:00:46

又回來了，因爲找不到什麼 'var回答= {};' '回答了[topic_id];'意思是 – vzhen 2013-02-19 19:39:54

聽起來就像你需要在Javascript中讀取數組一樣。看看http://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/。這很長，但應該有希望的幫助。 – 2013-02-20 00:54:14

我建議使用一個變量didtheuserclick這是在年初假，並檢查變量爲真比減，否則忽略減法部分，並設置變量設置爲true在點擊功能結束，我做了一個演示，http://jsfiddle.net/TtkDG/1/

你也可以在每次點擊時使用一個帶有增量的簡單整型變量，並檢查變量是否等於1，這是相同的邏輯，但如果僅僅用於這是毫無意義的增加一個變量，特別是如果你重新達到高數量。

希望它有幫助！

來源

2013-02-16 18:10:50 mircea

演示中存在問題。因爲正如你所說的那樣，單擊buttonA一次又一次會導致buttonB -1，之前userdidclick。 – vzhen 2013-02-16 18:17:15

我創建了一個函數來切換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％清楚自己想要什麼樣的行爲，只要用戶能夠繼續增加或者如果你將更新每頁加載active類的HTML如果用戶已經clciked答案

來源

2013-02-16 19:03:50 charlietfl

2個按鈕之間的增量和減量

回答

相關問題