0

其实我知道该怎么做。但这里有些不同。索引页面中有很多帖子。以及位于<li>标签中的每个帖子。我对每个帖子都有投票系统。

<ul>

  <li class="class_li" data-id="this_posts_id">
   <a href="#" class="btn">Vote Up</a> <button class="btn dropdown-toggle" 
   data-toggle="dropdown">
     <span class="vote"> CURRENT VOTE </span>
      <span class="caret"></span> </button>
      </li>

      <li class="class_li" data-id="this_posts_id">
            <!-- another <li> for other posts with same tags and class names -->
      </li>
       <li class="class_li" data-id="this_posts_id">
            <!-- another <li> for other posts with same tags and class names -->
      </li>
</ul>

我的jQuery代码：

$('a.btn').click( function(){
        var post_id = $(this).closest('li').data('id');
        var vote = 1;
        var ajaxOpt = {
            type: 'post',
            url: '/content/vote/',
            data: {
                'vote': vote,
                'post_id': post_id,
                },
            success: function(data){
                $(this).find('.vote').text(data.vote_new); // this does not work!

                },
            error: function(){
                console.log('error :[');
                }
        };
        $.ajax(ajaxOpt);

    })

我试过closest() parent()了find()。都一样。一旦我让它工作。但是那个时候所有帖子的投票值都发生了变化。不仅在<li>标签的边界之一。

我被困住了。一切看起来都是真的。但有些不对劲。

谢谢你。

4

1 回答 1

1

问题在于回调中的$(this)使用success。它不是按钮，这是您的代码所期望的。因此，您需要更改代码捕获success回调之外的引用。

所以下面是修改后的代码：

  • $this为按钮 ( )创建一个局部变量

  • 使用sibling()并find()获得正确的投票元素

    $('a.btn').click( function(){

    //This will be the button - maybe call it $button if that's clearer
    var $this = $(this);

    var post_id = $(this).closest('li').data('id');
    var vote = 1;
    var ajaxOpt = {
        type: 'post',
        url: '/content/vote/',
        data: {
            'vote': vote,
            'post_id': post_id,
            },
        success: function(data){

            //This now works! :)
            $this.siblings('button').find('.vote').text(data.vote_new); 

            },
        error: function(){
            console.log('error :[');
            }
    };
    $.ajax(ajaxOpt);

});

这是一个JSFiddle使用您的场景显示该概念。

于 2014-02-11T23:05:52.327 回答