个人div的jQuery功能

我认为这可以通过.prev()函数来实现，但由于某种原因，它不起作用。个人div的jQuery功能

我正在为博客上的帖子创建大拇指向上/向下按钮。我试图根据用户投票的内容显示消息。无论是向上还是向下，但是每当我为特定帖子投票时，都会显示所有帖子的消息。

这是我的代码。我删除了prev（）尝试使其更具可读性。该脚本工作得很好阿贾克斯聪明。

$(document).ready(function() { 
    $(".vote_button").click(function(e) { //the UP or DOWN vote button 
    var vote_status = $(this).attr('class').split(' ')[1]; //gets second class name following vote_button 
    var vote_post_id = $(this).attr("id"); //the post ID 
    var dataString = 'post_id=' + vote_post_id + '&vote_status=' + vote_status; 

    $.ajax({ 
     type: "POST", 
     url: "url/add_vote.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      if (vote_status == 1) 
     { 
       $('.msg_box').fadeIn(200); 
       $('.msg_box').text('You voted UP!'); 
      } 
      if (vote_status == 2) 
     { 
       $('.msg_box').fadeIn(200); 
       $('.msg_box').text('You voted DOWN!'); 
      } 
     } 
    }); 
    return false; 
}); 
});

样本HTML

<div class="vote_button 1" id="18">UP</div> 
<div class="vote_button 2" id="77">DOWN</div> 
<div class="msg_box"></div> 

<div class="vote_button 1" id="43">UP</div> 
<div class="vote_button 2" id="15">DOWN</div> 
<div class="msg_box"></div> 


<div class="vote_button 1" id="11">UP</div> 
<div class="vote_button 2" id="78">DOWN</div> 
<div class="msg_box"></div>

编辑：提供的jsfiddle没有Ajax部分 http://jsfiddle.net/XJeXw/

来源

2010-11-23 CyberJunkie

你不应该做`class`或`id`属性只是一个数字。他们不应该以数字开头。 – alex 2010-11-23 01:36:22

这是很好的信息。我会解决这个问题。 – CyberJunkie 2010-11-23 01:39:09

您需要保存click处理程序内的按钮的引用（例如，var me = $(this);），然后使用me.nextAll('.msg_box:first')在AJAX处理程序中。

编辑：Example：

var me = $(this); //The this will be different inside the AJAX callback 

$.ajax({ 
    type: "POST", 
    url: "url/add_vote.php", 
    data: dataString, 
    cache: false, 
    success: function(html) { 
     me.nextAll('.msg_box:first') 
      .text(vote_status == 1 ? 'You voted UP!' : 'You voted DOWN!') 
      .fadeIn(200); 
    } 
});

来源

2010-11-23 01:09:30 SLaks

个人div的jQuery功能

回答

相关问题