Question

其实我知道怎么做。但这里有些不同。索引页面中有很多帖子。以及<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>代码的边框中。

我被困住了。一切看起来都是真的。但是出了点问题。

谢谢。

Answer 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 。

如何在ajax的成功上更改按钮标签的文本

1 个答案: