javascript - jquery：单击更改图像并发布到外部页面

Question

我有一个小图标，单击时我想更改为另一个小图标并将数字发布到另一个页面（但忽略新页面的 HTML）。目的是让用户“喜欢”产品。我无法让它工作，但什么也没有发生。

我在头脑中使用的代码是：

<script type="text/javascript">
$(function() {
    $('.addlib').live("click",function() {
        var pibn = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: "/addlibrary.php",
            data: "pibn="+pibn, 
            beforeSend: function() {
                $('a.addlib').html('<img src="/images/icons/tick.png" width="18" height="18" class="iconbutton" />');
            },
            success: function(html) {
                return false;
            }
        });
        return false;
    });
});
</script>

在体内：

<span id="1000915326" class="addlib"><a href="#"><img src="/images/icons/info.png" width="18" height="18" class="iconbutton" /></a></span>

有任何想法吗？

Answer 1

beforeSend: function() {
   $('a.addlib').html('<img src="/images/icons/tick.png" width="18" height="18" class="iconbutton" />');
}

将其替换为

beforeSend: function() {
   $('span.addlib a').html('<img src="/images/icons/tick.png" width="18" height="18" class="iconbutton" />');
}

因为a.addLib不存在。

完整的测试代码。

$(function() 
{
    $('.addlib').live("click",function()
    {
        var pibn       = $(this).attr("id");
        var clickedDom = $(this);
        $.ajax(
        {
            type: "POST",
            url: "/addlibrary.php",
            data: "pibn="+pibn, 
            beforeSend: function()
            {
                clickedDom.find('a').html('<img src="/images/icons/tick.png" width="18" height="18" class="iconbutton" />');
            },
            success: function(html)
            {
                return false;
            }
        });
        return false;
    });
});

Answer 2

一个更简单的解决方案

$(document).on('click', '.addlib', function() {
    var span = $(this),
        img = span.find('img');
    $.post('/addlibrary.php', {
        pibn: span.attr('id')
    }, function() {
        img.attr('src', img.attr('src').replace('info', 'tick'))
            .parent('a').unwrap();
    });
});