jquery:单击时将图像和POST更改为外部页面

时间:2013-02-20 04:39:41

标签: javascript jquery

我有一个小图标,点击后我想更改为另一个小图标,并将一个数字发布到另一个页面(但忽略新页面的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>

有什么想法吗?

2 个答案:

答案 0 :(得分: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;
    });
});

答案 1 :(得分:0)

更简单的解决方案

$(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();
    });
});