javascript - 单个 div 上的多个 onclick 事件 - 更改 div 边框颜色 - javascript

Question

我已将此代码放入 div 中:

onclick="this.style.border='solid 1px red';"

如何插入多个 onclick 事件来触发边框颜色的变化 - 例如第一次单击 - 红色，第二次单击 - 蓝色，第三次单击 - 重置？

这正是我所需要的 - 使用多个 onclick 事件更改一个特定的 div，而不是使用多个 div 进行即兴创作。

编辑:

我还有其他使用 onclick 调用的操作 + 我在同一 div 内有 onmouseenter 和 onmouseleave 事件。一切都按预期工作，我只是无法让多个 onclick 事件工作。

我无法让这些功能中的任何一个工作，而且我也不知道为什么。也许是因为我有更多的操作和事件，或者可能取决于 Wordpress？

(我在 <script></script> 内部的标题区域中放置了一个函数)

我认为这比播放声音更容易，但令人惊讶的是声音是小菜一碟，这似乎是一个真正的挑战......

有人可以帮忙吗？

edit2:这取决于 Wordpres。现在我知道如何使适当的功能发挥作用。

edit3:我编辑了 user1875968 发布的一个小解决方案，我终于得到了我想要的(通过正确的重置):

var linkClick = 1; 
  function update_link(obj){ 
  if (linkClick == 1){obj.style.border = 'solid 1px red'};
  if (linkClick == 2){obj.style.border = 'solid 1px blue'};
  if (linkClick == 3){obj.style.border = 'solid 1px green'};
  if (linkClick >3 ) {obj.style.border = 'solid 1px #555555'; linkClick=0};
  linkClick++; 
}

感谢大家的帮助;)

Answer 1

您可以使用函数和 CSS 类。

确定您想要在不同类别之间切换的样式。让我们将它们视为:

.redBorder
{
   border: 1px solid red;
}

.blueBorder
{
   border: 1px solid blue;
}

.resetBorder
{
   border: none;
}

在div的点击事件上声明一个函数:

onclick="switchBorder(this);"

在函数内部，在 div 类上使用 switch case:

function switchBorder(divObj)
{
   prevClass = divObj.className;

   switch( prevClass )
   {
       case 'redBorder':
           divObj.className = "blueBorder"
           break;

       case 'blueBorder':
           divObj.className = "resetBorder"
           break;

       case 'resetBorder':
           divObj.className = "redBorder"
           break;

    }
}

希望有帮助。 :)

编辑:语法错误。