Question

如何在ajax成功时删除并显示这些元素？

我想在成功时删除这些元素

<a class="hyper" id="1234567890">
    <div class="mine">
        <img src="moo.png"/>
    </div>
</a>

并在成功时显示此元素

<a class="success" id="1234567890">
    <div class="sura">
        <img src="naa.png"/>
    </div>
</a>

这是我的ajax post代码

$('body').on('click','.hyper',function() {   
    var my_id = $(this).attr('id');       
    var postData = 'mydata='+my_id+'&time=now';
    $.ajax({        
        type: "POST",
        url: "my_post.php",
        data: postData,
        cache: false,
        success: function() 
            {           

            }       
    });
})

当我使用关注Zentoaku

时

$('#1234567890').removeClass('hyper').addClass('success').html('<div class="sura"><img src="naa.png"/></div>');

成功后我的元素显示

<a class="hyper" id="1234567890">
    <div class="mine">
        <img src="moo.png"/>
    </div>
    <a class="success" id="1234567890">
        <div class="sura">
            <img src="naa.png"/>
        </div>
    </a> 
</a>

但成功之后我想看到这个

<a class="success" id="1234567890">
    <div class="sura">
        <img src="naa.png"/>
    </div>
</a>

我该怎么办？

Answer 1

要隐藏，您可以使用以下内容：

success: function() 
{           
     $('.hyper').hide();
}

您还可以使用remove()方法从DOM中完全删除元素。

显示使用此：

success: function() 
{
   $('.success').show();
}

如果您对这两个元素使用不同的ID，则可以使用Id以及您的选择器。

注意：当您的问题中显示的网页上已存在html代码时，此解决方案将适用。

Answer 2

jQuery具有切换功能，您可以使用该功能切换项目的可见性。

http://api.jquery.com/toggle/

您的代码可能如下所示：

$('body').on('click','.hyper',function() {   
    var my_id = $(this).attr('id');       
    var postData = 'mydata='+my_id+'&time=now';
    $.ajax({        
        type: "POST",
        url: "my_post.php",
        data: postData,
        cache: false,
        success: function(my_id) 
        {           
            $('#'+my_id+'.hyper').toggle();
            $('#'+my_id+'.success').toggle();
            }       
   });
})

Answer 3

$('#1234567890').removeClass('hyper').addClass('success');
$('#1234567890 > div').removeClass('mine').addClass('sura');
$('#1234567890 > div > img').attr('src', 'naa.png')

OR

$('#1234567890').removeClass('hyper').addClass('success').html('<div class="sura"><img src="naa.png"/></div>');

如何在ajax成功时删除并显示这些元素？

3 个答案: