如何在ajax成功响应后更改html类？

我想切换投票箭头类，就像使用stackoverflow的投票箭头一样。对于已登录的用户，如果已经投了，html的是：如何在ajax成功响应后更改html类？

<a href="#vote" id="vote-up-%1$d" class="vote vote-up-on"></a> 
<a href="#vote" id="vote-down-%1$d" class="vote vote-down-off"></a>

用户点击后向下箭头，如果响应成功，如何改变“票上的”到“票了断” ，并将“投票下降”改为“投票下降”？

来源

2012-08-22 Jenny

你尝试过什么吗？ –

给我们一些javascript代码，这样我们就可以看到你在发布问题之前已经挠了脑袋 – 2619

你的意思是“if response success”？我看到你的问题中没有发布ajax。 – jbabey

做一个回调函数，当您收到Ajax响应。

function addVoteUpClass() { 
    if (jQuery(".vote").hasClass("vote-up-on")) { 
     jQuery(".vote-up-on").removeClass("vote-up-on").addClass("vote-up-off"); 
    } 
} 

jQuery.ajax({ 
    url: "your_url", 
    method: "GET", 
    success: function(data) { 
     addVoteUpClass(); 
    } 
});

来源

2012-08-22 14:16:19

令人惊叹！我在ajax响应函数中添加了语句（没有函数包装器），它的工作原理！ – Jenny

那么，这个工程一样SA票 - 这可能是一个有点更简洁，但我真的需要回去工作;-)

<a href="#vote" id="vote-up-%1$d" class="vote vote-up">vote up</a> 
<span class="votes">0</span> 
<a href="#vote" id="vote-down-%1$d" class="vote vote-down">vote down</a>

和jQuery的：

$(document).on('click', '.vote-up', function() { 
    if(!$(this).hasClass('vote-locked')){  
     var votes = parseInt($(this).parent().find('.votes').text()); 
     if(!$(this).hasClass('vote-off')){ 

      $(this).addClass('vote-off'); 
      $(this).nextAll('a').addClass('vote-locked'); 
      votes++; 

     } 
     else{ 

      $(this).removeClass('vote-off'); 
      $(this).nextAll('a').removeClass('vote-locked'); 
      votes--; 

     } 
     $(this).parent().find('.votes').text(votes); 
    } 
}); 

$(document).on('click', '.vote-down', function() { 
    if(!$(this).hasClass('vote-locked')){ 
     var votes = parseInt($(this).parent().find('.votes').text()); 
     if(!$(this).hasClass('vote-off')){ 

      $(this).addClass('vote-off'); 
      $(this).prevAll('a').addClass('vote-locked'); 
      votes--; 

     } 
     else{ 

      $(this).removeClass('vote-off'); 
      $(this).prevAll('a').removeClass('vote-locked'); 
      votes++; 

     } 
     $(this).parent().find('.votes').text(votes); 
    } 
});

http://jsfiddle.net/gqDgL/

来源

2012-08-22 13:59:13 m7o

谢谢！这适用于单击向下箭头。我试图复制你的代码，并添加另一个2行向上箭头，但我的向上箭头不能正常工作。你能不能展示如何使它成为两个箭头？ – Jenny

是不是应该投票下来呢？或者投票应该是一票投票？ – m7o

我会编辑我的答案，包括点击事件，如果你告诉我 – m7o

jQuery的可以添加和使用addClass和removeClass删除类，

$('#vote-up-%1$d').removeClass('vote-up-on'); 

$('#vote-up-%1$d').addClass('vote-up-off');

来源

2012-08-22 13:59:47 Mike

$("#vote-up").click(function() { 
      $(this).toggle(); 
      $(this).toggleClass("vote vote-down-off"); 
     });

试试这个

来源

2012-08-22 14:01:24 Sender

如何在ajax成功响应后更改html类？

回答

相关问题