2

每次用jquery单击时如何更改元素的ID？我有这段代码在第一次点击时可以正常工作，但是当再次点击时，它仍然调用旧的 id。

$("#like<? echo $msgID;?>").click(function(){                                             
        $.post("like.php?status_id=<? echo $msgID;?>", $(this).serialize());
        setTimeout(function() {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        $("#like<? echo $msgID;?>").attr("id","unlike<? echo $msgID;?>").text("Unlike");
        },500);
        });
$("#unlike<? echo $msgID;?>").click(function(){                                     
        $.post("unlike.php?status_id=<? echo $msgID;?>", $(this).serialize());
        setTimeout(function() {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        $("#unlike<? echo $msgID;?>").attr("id","like<? echo $msgID;?>").text("Like");
        },500);
        });
4

3 回答 3

1

问题不在于 id 没有改变，而是您已经绑定了点击处理程序。一般来说，如果你这样做：

$("#someId").click(...

它将点击处理程序绑定到当时具有该 id 的元素，并且即使您稍后更改 id，点击处理程序仍继续绑定到该元素。

在您的情况下，您开始尝试将点击处理程序绑定到两个元素，一个具有 id 开始#like，另一个具有 id 开始#unlike，但最初只存在一个这样的元素，因此只有一个处理程序被绑定。

您需要更改为使用绑定到父元素（或文档）的委托事件处理程序，并在单击时测试单击的项目是否与某个选择器匹配，或者将两个单击处理程序组合成一个处理程序来测试当前状态元素：

$("#like<? echo $msgID;?>").click(function () {
    var isLike = $(this).text() === "Like",
        url = isLike ? "like.php" : "unlike.php";
    $.post(url + "?status_id=<? echo $msgID;?>", $(this).serialize());
    setTimeout(function () {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        $("#like<? echo $msgID;?>").text(isLike ? "Unlike" : "Like");
    }, 500);
});

您没有显示您的 html，但我假设该#like...元素不在该#likeDiv...元素内（因为如果它是它，它将由您重新加载.load()，这将删除点击处理程序）。

我可以添加一些代码来展示如何执行两个委托处理程序，但以我的思维方式，将已经显示的处理程序组合起来更有意义，因为实际上它是被单击的相同元素并且只是其显示的文本需要改变。

（另外，顺便说一句，你为什么要使用它setTimeout()？将它作为第三个参数放在回调函数中是否有意义$.post()？）

于 2013-08-10T03:11:04.163 回答
0

在此处设置了一个 jsfiddle：http: //jsfiddle.net/ewYbm/2/以及另一个示例。

假设以下 HTML：

<div class="article">
   <a class="like btn" data-status-id="1" data-likes="0">Like</a>
</div>

<div class="article" >
   <a class="like btn" data-status-id="2" data-likes="1">Like</a>
</div>

你可以这样做：

$('.article .btn')

    // Initialize the count of likes from the data-likes attribute
    .each(function(el, i){
        $(this).append('&nbsp;<span class="count">' + $(this).data('likes') + '</span>')
    })

    // Bind the click handler to toggle like/unlike state
    .click(function(evt){

    var btn = $(this),
        statusID = btn.data('status-id'),
        unliked = btn.hasClass('like'),
        count = parseInt(btn.data('likes')),
        postURL;

    if(unliked){
        postURL = 'like.php';
        count = count + 1;
    } else {
        postURL = 'unlike.php';
        count = count - 1;
    }

    // Save the like count as a data attr
    btn.data('likes', count);

    // Send an XHR request to like/unlike status (commented out here)
//    $.post(postURL, 
//           { statusID: statusID }, 
//           function(data){
               btn
                .toggleClass('like', !unliked)
                .toggleClass('unlike', unliked)
                .text(!unliked ? 'Like' : 'Unlike')            
               // update the count
               .append('&nbsp;<span class="count">' + count + '</span>')
//       }
//    );

});
于 2013-08-10T03:53:19.707 回答
0

出现问题是因为当您调用 jquery 来绑定 #unlike 时，它​​不存在（为此，您应该使用委托/实时事件，试试这个：

$(document).on('click','#like<? echo $msgID;?>',function(){                                             
    $.post("like.php?status_id=<? echo $msgID;?>", $(this).serialize());
    var oLike = this;
    setTimeout(function() {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        oLike.prop("id","unlike<? echo $msgID;?>")
        oLike.text("Unlike");
    },500);
});

$(document).on('click','#unlike<? echo $msgID;?>',function(){                                     
    $.post("unlike.php?status_id=<? echo $msgID;?>", $(this).serialize());
    var oLike = this;        
    setTimeout(function() {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        oLike.prop("id","like<? echo $msgID;?>")
        oLike.text("Like");
    },500);
});

PS：一旦您没有显示您的 HTML，在我的示例中，您可以更改“文档”以获得更严格的上下文，您可以在其中更新“ID”。

尝试查看这篇文章的 JQuery事件代表部分。

于 2013-08-10T03:16:45.820 回答