Question

我尝试运行代码来更改div id，class，...在每次点击中但我不

知道这是我的js代码：

<div class="up_vote_bt upvote_hide" title="Delete up vote" onclick="upvoteHide()" id="hideupvote"></div>
<script>
$(document).ready(function() {
$("#upvote").click(function() {
document.getElementById("upvote").setAttribute("class","up_vote_bt upvote_hide");
document.getElementById("upvote").setAttribute("title","delete up vote");
document.getElementById("upvote").setAttribute("onclick","hideupvote()");
document.getElementById("upvote").setAttribute("id","hideupvote");
});
});
</script>
<script>
$(document).ready(function() {
$("#hideupvote").click(function() {
document.getElementById("hideupvote").setAttribute("class","up_vote_bt");
document.getElementById("hideupvote").setAttribute("title","up vote");
document.getElementById("hideupvote").setAttribute("onclick","upvote()");
document.getElementById("hideupvote").setAttribute("id","upvote");

});
});
</script>

Answer 1

如果您正在使用jQuery，为什么不这样做呢？

$(document).ready(function(){
    $('#upvote').click(function(){
        //$(this) for just this element
        if($(this).hasClass('upvote_hide')){
            $(this).attr('title','Up vote');
            upvote();
        }else{
            $(this).attr('title','Delete up vote');
            hideupvote();
        }
        $(this).toggleClass('upvote_hide')
    });
});

toggleClass()会添加或删除upvote_hide，如果它不存在或存在。

attr()会像setAttribute()

那样改变属性

对于我的示例，无需更改eventHandlers或在您的情况下将属性onClick设置为该函数。我在jQuery事件处理函数中完成了所有操作。因此，您在函数中调用您传递给onclick属性的函数。

Answer 2

使用

通过jQuery附加事件处理程序时

$("#upvote").click(function() { ... });

机制，jQuery将把处理程序直接附加到查询结果集中的元素。这意味着处理程序将在那里，无论将来ID更改。

您可以做的是将委托的处理程序附加到文档中。

$(document).on("click", "#upvote", function() { ... });
$(document).on("click", "#hideupvote", function() { ... });

有关更深入的解释，请参阅this article

此外，在这种情况下设置onclick属性是没有意义的，您应该删除这些行。

但是，元素的changin ID不是一个好习惯。 ID应该表示DOM节点的唯一标识符，预计不会更改。我宁愿在这里切换课程。

在每次点击中更改div类，id，..

2 个答案: