Javascript 更改div类，id，。。每次点击

我正在尝试运行代码来更改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>

$（文档）.ready（函数（）{
$（“#向上投票”）。单击（函数（）{
document.getElementById（“upvote”）.setAttribute（“class”、“up\u vote\u bt upvote\u hide”）；
document.getElementById（“向上投票”）.setAttribute（“标题”，“删除向上投票”）；
document.getElementById（“upvote”）.setAttribute（“onclick”、“hideupvote（）”）；
document.getElementById（“upvote”）.setAttribute（“id”、“hideupvote”）；
});
});
$（文档）.ready（函数（）{
$（“#隐藏提示”）。单击（函数（）{
document.getElementById（“hideupNote”）.setAttribute（“class”，“up_vote_bt”）；
document.getElementById（“hideupvote”）.setAttribute（“title”，“up vote”）；
document.getElementById（“hideupNote”）.setAttribute（“onclick”、“upvote（）”）；
document.getElementById（“hideupvote”）.setAttribute（“id”，“upvote”）；
});
});

当您使用

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

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

您可以做的是像这样将委托处理程序附加到文档

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

请参阅以获得更深入的解释

此外，在这种情况下，设置

onclick

属性没有意义，您应该删除这些行

---

然而，改变元素的ID并不是一个好的实践。ID应该表示DOM节点的唯一标识符，预期不会更改。我宁愿在这里切换类。

当您使用

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

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

您可以做的是像这样将委托处理程序附加到文档

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

请参阅以获得更深入的解释

此外，在这种情况下，设置

onclick

属性没有意义，您应该删除这些行

---

然而，改变元素的ID并不是一个好的实践。ID应该表示DOM节点的唯一标识符，预期不会更改。我宁愿在这里切换类。

如果使用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\u hide

，如果它不存在或不存在

attr（）

将改变属性，就像

setAttribute（）

---

在我的示例中，不需要更改EventHandler，或者在您的示例中设置函数的属性onClick。这些都是在jQuery事件处理程序函数中完成的。因此，传递给onclick属性的函数将在函数中调用

如果使用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\u hide

，如果它不存在或不存在

attr（）

将改变属性，就像

setAttribute（）

---

在我的示例中，不需要更改EventHandler，或者在您的示例中设置函数的属性onClick。这些都是在jQuery事件处理程序函数中完成的。因此，传递给onclick属性的函数将在函数中调用

非常感谢您，但是如何更改onclick值：）@grandor使用此函数，您不需要onclick属性。这一切都在点击事件处理程序中处理：）

upvote（）

或

hideupvote（）

在事件函数中被调用。非常感谢，但是如何更改onclick值：）@grandor使用此函数，您不需要onclick属性。它都在点击事件处理程序中处理：）

upvote（）

或

hideupvote（）

在事件函数中调用