使多个 ajax 'like' 按钮使用相同的 jQuery 脚本？答案

【问题标题】：Making multiple ajax 'like' button use same jQuery script?使多个 ajax 'like' 按钮使用相同的 jQuery 脚本？
【发布时间】：2011-08-21 15:44:52
【问题描述】：

我有一个使用 jQuery 的 Ajax 'like' 按钮，该按钮将在页面上多次使用。我真的不想多次包含 jQuery 脚本，所以有没有办法让 jQuery 为页面上的所有类似按钮工作，但使用每个帖子的唯一 ID。这可能是一个菜鸟问题，但我就是这样。您可以提供的任何解决方案都会很棒。谢谢！

代码：

jQuery:

<script type="text/javascript">
$(function() {
$(".like").click(function(){
$("#loading").html('<img src="loader.gif" align="absmiddle">&nbsp;loading...');

 $.ajax({
   type: "POST",
   url: "like.php?id=<?php $row['uid']; ?>", // UNIQUE ID, EVERY POST WILL HAVE ONE
   success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#like'+I).fadeOut(200).hide();
$('#remove'+I).fadeIn(200).show();
}
});
return false;

});

});
</script>

<script type="text/javascript">
$(function() {
$(".remove").click(function(){
$("#loading").html('<img src="loader.gif" align="absmiddle">&nbsp;loading...');

 $.ajax({
   type: "POST",
   url: "remove.php?id=<?php $row['uid']; ?>", /// UNIQUE ID, EVERY POST WILL HAVE ONE
   success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#remove'+I).fadeOut(200).hide();
$('#like'+I).fadeIn(200).show();
}
});
return false;

});

});
</script>

HTML：

<div id="follow1"><a href="#" class="follow" id="1">

<span style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-weight: bold; color:#7391AC; text-align:left; font-size:20px; text-align:left;">&nbsp;<strong>like</strong>
</span></a>
</div>

<div id="remove1" style="display:none"><a href="#" class="remove" id="1">

<span class="remove_b" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-weight: bold; color:#7391AC; text-align:left; font-size:20px; text-align:left;">unlike
</span></a>
</div>

【问题讨论】：

标签： php javascript jquery ajax jquery-ui

【解决方案1】：

您可以将 id 存储在包含元素上，并在每次点击时获取它，就像这样；

html

<div class="box" data-id="1">
    <a href="#" class="like">like</a>
    <a href="#" class="remove">remove</a>
    <!--etc-->
</div>

javascript

$(function() {
    $(".like, .remove").click(function(e) {

        var id = $(this).closest('.box').data('id');
        var url = $(this).attr('class') + ".php?id=" + id;
        // a click on like will generate a url: like.php?id=1

    });
});

http://jsfiddle.net/6Vrvv/ 上的演示

【讨论】：

【解决方案2】：

使用一个类并像您一样使用该类添加您的点击功能，您可以获取被点击元素的 id。

<a href="#" id="1" class="likeMe">Like 1</a>

和

<a href="#" id="2" class="likeMe">Like 2</a>

可以像这样定位：

$('.likeMe').click(function(){

  alert($(this).attr('id'));  //call your ajax stuff here with the correct id

});

【讨论】：

id 属性必须以字母开头，并且在页面上是唯一的，仅供参考； reference.sitepoint.com/html/core-attributes/id - "this.id" 也会更容易地返回一个 id ;)
只需给它一个像“id12”这样的 id 并使用 substr 将“id”剪掉：$(this).attr('id').substr(2);