Question

我的页面中有一个按钮：

if($posts = $q->fetchAll()) {
    foreach ($posts as $post) {
        $username = $post[0];
        $post_id = $post[2];
        $status = $post[1];
        echo $username . " " . $status . "<br/>";
        echo "<button value = '$post_id' id = 'like' class='like' type='submit'>Like</button>";
    }
}

假设我有10个查询结果，我肯定会有10个具有相同ID的LIKE按钮。

现在我的jQuery就是这样：

$("#like").click(function() {  
    var menuId = $(this).val();

    var request = $.ajax({
        url: "likes.php",
        type: "POST",
        data: { id : menuId },
        dataType: "html"
    });

    request.done(function( msg ) {
        $(".likecount").html( msg ); 
    });
});

单击按钮的每次点击都适用于所有10个按钮。如何区分它们并相应地影响数据库？

Answer 1

为什么不将PHP更改为：

if($posts = $q->fetchAll()){
   foreach ($posts as $post){
   $username = $post[0];
   $post_id = $post[2];
   $status = $post[1];
     echo $username . " " . $status . "<br/>";
     echo "<button value = '$post_id' id = 'like_$post_id' class='like' type='submit'>Like</button>";
}

由于每个项目都与具有（我希望）唯一ID的帖子相关，为什么不将该值附加到id属性？

ID值必须是独一无二的

然后你需要改变你的jQuery选择器，如何：

$("button.like").click(function()

Answer 2

首先，您通过ajax添加之类的元素，但是您将事件处理程序绑定到任何给定时刻已经属于dom的元素：

$(document).ready(function() { //when dom is loaded, #like is selected, and event is bound $('#like').click(function(){}); });

在点击处理程序中，你执行一个ajax调用，可以向页面添加另一个类似的元素，但你永远不会将事件处理程序绑定到该新元素。
您有两个选择：为动态添加到页面的每个元素添加事件处理程序（不太好，性能不好）。 OR 委托该活动。作为额外的奖励，您不再需要类似按钮的ID了。您可以使用like类进行委派！

$(document).ready(function() { $('body').on('click', '.like', function() { //handle click on like button here }); });

这会向body标签添加一个事件监听器，只要在具有like类的元素上注册了一个点击，它就会调用回调函数。

我会编辑此回复，为您提供一种纯粹假设的方式，以确保像id一样独特

使用闭包，通过利用闭包变量可以比闭包函数更长的事实，您可以轻松获得唯一ID。但正如您所看到的，仅从下面代码的详细程度和增加的复杂性来看，这种方法 not 是推荐的。只需使用该课程，并将ID保留。 代表团一路！

$('body').on('click', '.like', (function(count) {//closure, pass like buttons currently on page var idNum = 0; count.each(function() { $(this).attr('id', $(this).attr('id') + idNum); ++idNum;//increment }); return function() {//this is the actual callback request.done(function( msg ) { var chunk = $(msg);//parse HTML response chunk.find('.like').each(function() { $(this).attr('id', ($(this).attr('id') || 'like') + idNum); ++idNum; }); }); }; }($('.like'))));

或者，如果由于某种原因您不想委派该事件：

$('.like').on(function handler() {//callback should be named, you'll see why request.done(function( msg ) { $('.like').off('click', handler);//remove handler //add msg to DOM $('.like').on('click', handler);//add handler, now including new DOM elements }); });

你可以（和IMO应该）通过将$.each回调存储在闭包引用中来进一步优化它：

$('body').on('click', '.like', (function(count) {//closure, pass like buttons currently on page var idNum = 0, eachCallback = function() { $(this).attr('id', ($(this).attr('id') || 'like') + idNum); ++idNum;//increment }; count.each(eachCallback); return function() {//this is the actual callback request.done(function( msg ) { var chunk = $(msg);//parse HTML response chunk.find('.like').each(eachCallback); }); }; }($('.like'))));

这样，您就可以避免在每次单击事件上创建一个回调函数对象...但是请阅读闭包以完全理解为什么这是一种更好的方法，性能明智。

Answer 3

不要在jquery中使用ID作为选择器，如果你的按钮要使用同一个类，请使用类选择器。

例如：

if($posts = $q->fetchAll()){
   foreach ($posts as $post){
       $username = $post[0];
       $post_id = $post[2];
       $status = $post[1];
       echo $username . " " . $status . "<br/>";
       // Removing Id like, because Id should be unique in DOM.
       echo "<button value = '. $post_id. ' class='like' type='submit'>Like</button>";
    }
}

你的jQuery看起来像：

// class selector is a dot (.), if you use an id selector (hashtag #) and you
// you have more than 1 element with that Id, jQuery will only select the first one.
  $('body').on('click', '.like', function(){ 
     var menuId = $(this).val();

    var request = $.ajax({
      url: "likes.php",
      type: "POST",
      data: { id : menuId },
      dataType: "html"
    });

    request.done(function( msg ) {
      $(".likecount").html( msg ); 
    });
  });

如何在PHP中生成唯一的LIKES id

3 个答案: