Question

我有一个动态的链接HTML。链接出现在来自数据库的每个内容中。它的功能与facebook一样链接。当用户单击链接时，文本应更改为“喜欢”。我正在处理的链接是类'likeLink'。这是我的HTML

while($fetch = mysql_fetch_array($selectResult))
                {
                ?>
                        <div class="col-md-8 col-md-offset-2 well" style="background: #c8c8c8 url('ProfilePic/b10.jpg'); ">
                        <div class="col-md-2 thumbnail">
                            <img src="ProfilePic\<?php echo $fetch['ProfilePic']; ?>" alt="<?php echo $fetch['ProfilePic']; ?>">
                        </div>
                        <div class="col-md-3">
                        <p><a href="#"><b style="color:darkred;"><?php echo $fetch['Name']; ?></b></a></p>
                        <span><?php echo $fetch['PostContent']; ?></span></br>
                        <a href="#" class="likeLink" postAttrVal="<?php echo $fetch['PostId'];?>"><i class="fa fa-thumbs-o-up">Like</i></a>


                        <span ><?php echo $fetch['Visibilty']; ?></span>
                        <span ><?php echo $fetch['CreateDate']; ?></span>
                    </div>
                </div>
                <?php
                }

我的jquery代码是：

$(document).ready(function(){
    $('body').on('click','.likeLink', function(){
        $.ajax({
            type:"post",
            url:"likescript.php",
            dataType:"json",
            data:{
                "postid" : $(this).attr('postAttrVal')
            },
            success:function(data){
                if(data == true){
                    $(this).html('<i class="fa fa-thumbs-o-up">Liked</i>');
                }
                else{
                    alert('Something Went Wrong');
                }

            },
            error: function(data){
                console.log(data);
            }
        });
    });
});

有关如何实现的任何想法吗？

Answer 1

您需要将this的引用存储在变量中，因为成功回调方法this没有引用调用该事件的元素。

$('body').on('click','.likeLink', function(){

    //Store it in a variable
    var _this = $(this);

    $.ajax({
        success:function(data){
            if(data == true){
                //Use stored variable
                _this.html('<i class="fa fa-thumbs-o-up">Liked</i>');
            }
        }
    });
});

Answer 2

首先保存此对象的实例：

 $('body').on('click','.likeLink', function(){  
      var currentClickedElement= $(this);
    ////other codes
    )}

然后在ajax调用中添加context属性以设置ajax上下文

 context:this,

然后以下任何一种方法都应该有效：一种方法：

success:function(data){
                if(data == true){

 // this will add the new Id.                  
  $(currentClickedElement).html('<i class="fa fa-thumbs-o-up">Liked</i>');

                }
                else{
                    alert('Something Went Wrong');
                }

            }

第二种方法：

               if(data == true){
var $firstI =                        $(currentClickedElement).find('i').eq(0);
$firstI.Text('Liked');

                    }
                    else{
                        alert('Something Went Wrong');
                    }

                }

Answer 3

在这种情况下，$(this)并不是您在$(this).html('<i class="fa fa-thumbs-o-up">Liked</i>');

时的想法

您处于success回调函数的上下文中。在调用ajax函数之前，请设置var $this = $(this)以使您处于元素的上下文中。然后，您可以在回调中使用$this。

更改动态显示链接jquery的链接文本？

3 个答案: