2016-04-19 86 views
-1

我的網站上有一個類似的系統;當有人點擊類似的按鈕時,我想讓喜歡的數字動態增加1。通過JavaScript增加元素的值

爲此;我使用了可以正常工作的Ajax調用。 一旦Ajax調用是過去,我希望它增加一個元素值:

$(document).ready(function(){ 
    $('.likebutton').on('click', function() {  
    var a = $(this).attr('name');   
    var b = a.slice(4, 99);     
    var c = "opim" + b; 
    var d = 1; 
    $.post('like.php', {i: b}, function(data) { 
     $('.likebutton[name=' + a +']').replaceWith("<i name=\"like$i\" class=\"fa fa-heart likebuttono thisi3\" style=\"color:red\"></i></br>Aimé!"); 
     document.getElementById(c).innerHTML = parseInt(document.getElementById(c).innerHTML,10) + d; 
    }); 
    }); 
}); 

這工作;但有時候,不是加1,而是增加2或3。

任何人都可以解釋爲什麼它做到這一點,以及如何解決這個問題?

+0

您將需要發佈比這更多的代碼,因爲該代碼行不會超過'1'。 – Pointy

+2

唯一的原因是代碼位被執行了2次或3次 –

+1

可能是人們雙擊(或三次點擊?)的按鈕。我建議你在點擊一次時禁用按鈕。 – Krishna

回答

1

我可能建議你利用數據屬性。

因爲我不知道你的HTML代碼,我建議你下面的代碼,以阻止點擊多個。

$(function() { 
 
    $('.likebutton').on('click', function (e) { 
 
    // get the AlreadyClicked data attribute 
 
    var aClicked = $(this).data('AlreadyClicked'); 
 

 
    // if yet defined stop 
 
    if (aClicked !== undefined) { 
 
     alert('Already clicked!'); 
 
     e.preventDefault(); 
 
     return; 
 
    } 
 
    // define it 
 
    $(this).data('AlreadyClicked', true); 
 

 

 
    var a = $(this).attr('name'); 
 
    var b = a.slice(4, 99); 
 
    var c = "opim" + b; 
 
    var d = 1; 
 
    $.post('like.php', {i: b}, function (data) { 
 
     $('.likebutton[name=' + a + ']').replaceWith("<i name=\"like$i\" class=\"fa fa-heart likebuttono thisi3\" style=\"color:red\"></i></br>Aimé!"); 
 
     document.getElementById(c).innerHTML = parseInt(document.getElementById(c).innerHTML, 10) + d; 
 
    }); 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<button class="likebutton" name="name......">I Like</button>

另一種解決方案可以基於one:之後的第一個點擊處理程序停止的事件。

 $('.likebutton').one('click', function (e) { 
      var a = $(this).attr('name'); 
      var b = a.slice(4, 99); 
      var c = "opim" + b; 
      var d = 1; 
      $.post('like.php', {i: b}, function (data) { 
       $('.likebutton[name=' + a + ']').replaceWith("<i name=\"like$i\" class=\"fa fa-heart likebuttono thisi3\" style=\"color:red\"></i></br>Aimé!"); 
       document.getElementById(c).innerHTML = parseInt(document.getElementById(c).innerHTML, 10) + d; 
      }); 
     }); 
相關問題