javascript - 如何让 1 个带有改变 id 的按钮做不同的事情？

Question

我有一个按钮，当按下它时，除了执行某些操作之外，它还会更改自己的 id，因此当再次按下时，它会执行不同的操作，就好像它是一个不同的按钮一样。问题是，第一次更改 id 后，上一个按钮单击函数会抛出错误，因为 id 不再存在。

$("#button1").click(function() {
    //do something
    document.getElementById("#button1").id = "button2";
});

$("#button2").click(function() {
    //do something different
    document.getElementById("#button2").id = "button1";
});

Answer 1

您可以通过使用 jQuery 来完成此操作，但就像评论中提到的那样，这可能表明您需要更改方法。但是，如果您必须这样做，这里有一个使用 jQuery 的“on”的解决方案。

http://jsfiddle.net/WetNoodles/ab5yn7eL/

$('#outerContainer').on('click', '#button1', function () {
    alert('button 1 clicked!');
    $(this).attr('id', 'button2');
});

$('#outerContainer').on('click', '#button2', function () {
    alert('button 2 clicked!');
    $(this).attr('id', 'button1');
});

一些附加说明 - 如果您采用 smerny's 方法，您仍然需要使用“on”函数将事件绑定(bind)到更改的属性，除非您直接在 html 上设置了 onclick 属性标签。 克里斯蒂安的方法可以让您像当前使用的那样使用点击功能。