1

我是 jQuery AJAX 的新手。我想建立类似 Twitter 的书签系统（收藏夹）。我有很多链接。所以为每个链接编写 AJAX 请求是没有用的。这就是为什么我只想对所有链接使用一个请求脚本。

假设我有链接的东西链接这个：

<a href="#" id="1"><i class="icon-star-empty"></i></a>
<a href="#" id="2"><i class="icon-star"></i></a>
<a href="#" id="3"><i class="icon-star-empty"></i></a>

所以我想编写 AJAX 请求，当用户单击其中一个 URL 时执行类似的操作。

if (class="icon-star-empty"){
    ajaxURL = "/insertBoomark"
} else{
    //it means class=icon-start
    ajaxURL = "/deleteBookmark"
}

$.ajax({
  url: ajaxURL,
  type: "POST",
  data: {id : linkID}, // I don't know how to get linkID too :(
  success: if class was icon-star empty then change it to icon-star-empty else change it to icon-star
});

我知道那不是正确的语法。我怎么解决这个问题？请帮忙 ：（

提前致谢。

4

4 回答 4

1 
$("i").on("click", function() {

    if ( $(this).hasClass("icon-star-empty") ){
        ajaxURL = "/insertBoomark"
    } else{
        //it means class=icon-start
        ajaxURL = "/deleteBookmark"
    }

    var linkID = $(this).parent().prop("id");
    var obj    = $(this);

    $.ajax({
        url: ajaxURL,
        type: "POST",
        data: {id : linkID},
        success: function() {
            obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
        }
    });
})
于 2012-08-27T00:43:06.033 回答
1

您还可以使用 href 属性并阻止 jquery 事件的默认操作。

html

<a href="page1" class="icon-star-empty"></a>
<a href="page2" class="icon-star"></a>
<a href="page3" class="icon-star-empty"></a>

javascript

    $(function(){
        $(document).on('click','a',function(e){
            e.preventDefault(); //prevent default click action
            var $this = $(this);  // keeps "this" accessable
            var ajaxURL = $this.attr('href'); // get the url from the "a" tag
            $.ajax({
                url: ajaxURL,
                type: "POST",
                data: {id : linkID},
                success: function() {
                    if($this.hasClass("icon-star"))
                        $this.removeClass("icon-star").addClass("icon-star-empty");
                    else
                        $this.removeClass("icon-star-empty").addClass("icon-star");
                }
            });
        });
    });
于 2012-08-27T00:56:36.937 回答
0

好的，首先，class是 javascript 中的保留名称。

其次，如果您使用jQuery.click函数执行此操作，那么您只需$(this).attr('id')获取 id。

此外，对于成功部分，您似乎对 javascript 的函数语法感到困惑。你到底想做什么？

于 2012-08-27T00:39:02.413 回答
0 
$('a').click(function(){
    var _ajaxURL,
    _self = $(this);
    if($(this).hasClass('icon-star-empty')){
        _ajaxUrl = "/insertBookmark";
    }else{
        _ajaxUrl = "/deleteBookmark";
    }
    $.ajax({
        url: _ajaxUrl,
        type: 'POST',
        data: {id : $(this).prop('id')},
        success: {
           //I have no idea what you want to do right here.
        }
    });
});
于 2012-08-27T01:20:44.607 回答