如何在每次使用jquery单击时更改元素的id [英] how do i change id of a element every time it is clicked with jquery

问题描述

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

how do i change id of a element every time it is clicked with jquery? I have this code which works fine on the first click, but then when clicked again, it still calls the old 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);
        });

推荐答案

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

The problem isn't that the id isn't changing, it is that you've bound your click handlers already. In a general sense, if you do this:

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

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

it binds a click handler to the element that has that id at that moment, and the click handler continues to be bound to that element even if you change the id later.

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

In your case you start out trying to bind a click handler to two elements, one with id starting #like and the other with id starting #unlike, but only one such element exists initially and so only one handler is bound.

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

You need to either change to use delegated event handlers, which are bound to a parent element (or the document) and on click test whether the clicked item matches some selector, or combine the two click handlers into one handler that tests the current state of the element:

$("#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 ... 元素内（因为如果是，它将由<$ c重新加载$ c> .load（）这将删除点击处理程序。）

You didn't show your html, but I'm assuming that the #like... element is not inside the #likeDiv... element (because if it was it would be reloaded by your .load() and that would remove the click handler).

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

I can add some code to show how to do the two delegated handlers instead, but to my way of thinking it makes more sense to combine the handlers as already shown, because really it is the same element that is being clicked and just its displayed text needs to change.

（另外，另外，为什么你要使用那个 setTimeout（）？将它放在回调函数中是没有意义的 $。post（）的第三个参数？）

(Also, as an aside, why are you using that setTimeout()? Wouldn't it make sense to put that in a callback function as the third argument to $.post()?)

这篇关于如何在每次使用jquery单击时更改元素的id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！