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

我在div中输入了以下代码：

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

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

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

编辑：

我还使用onclick+调用了其他操作，在同一个div中有onmouseenter和onmouseleave事件。一切都正常工作，我只能让多个onclick事件工作

我不能让这些函数中的任何一个工作，我也不知道为什么。也许是因为我有更多的动作和事件，或者是因为Wordpress

（我在

的标题区域中放置了一个函数）

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

有人能帮忙吗

编辑2：这取决于Wordpres。现在我知道如何使适当的功能发挥作用

edit3：我编辑了一个由用户1875968发布的小解决方案，最终得到了我想要的（通过适当的重置）：

---

谢谢大家的帮助；）

我能想到的唯一方法是每次触发点击事件时更改它，如下所示：

x.onclick = method1;

function method1()
{
x.onclick = method2;
}

funbction method2()
{
x.onclick = method3;
}

function method3()
{
x.onclick = method1;
}

---

您可以使用整数

onclick="my_function()"

然后：

function my_function(){
  i++;
  if(i == 1){
    //red
  }
  if(i == 2){
    //blue
  }
  if(i == 3){
    i = 0;
    // reset
  }
}

---

为此，最好使用javascript

var clicks = 0;

function changeBorder() {
    if(++clicks > 2) clicks = 1;
    switch (clicks) {
        case 1 : { this.style.border='solid 1px red';}; break;
        case 2 : { this.style.border='solid 1px blue';}; break;
    }
}

但是你必须适应“这个”元素。（我不知道是哪一个，请使用getElementById）

并在HTML中使用

onclick="changeBorder()" 

---

您可以使用函数和css类

将要在其中切换的样式标识为不同的类。让我们把它们看作：

.redBorder
{
   border: 1px solid red;
}

.blueBorder
{
   border: 1px solid blue;
}

.resetBorder
{
   border: none;
}

在div的click事件上声明函数：

onclick="switchBorder(this);"

在函数内部，使用div类上的开关盒：

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;

    }
}

希望有帮助。：）

---

编辑：语法错误。

类似的内容。假定默认边框为“1px纯黑”。这可以扩展为包含任意多的更改和颜色

function changeBorder(ele){

 var colors = ["1px solid black", "1px solid red", "1px solid blue"];
 var curInd = colors.indexOf(ele.style.border);

 if(curInd != colors.length-1){  //If the current color isn't the last one
    //Next color
    ele.style.border = colors[curInd++];
 } else {
    //Reset to first color
    ele.style.border = colors[0];
 }
}

注意：array.indexOf是针对较旧浏览器的ECMAscript 5实现。请包括找到的垫片

var linkClick=0；
功能更新链接（obj）{
如果（linkClick==0）{obj.style.border='solid 1px red'}；
如果（linkClick==1）{obj.style.border='solid 1px blue'}；
如果（linkClick>1）{obj.style.border='solid 1px red'；linkClick=0}；
linkClick++；
}

HTML

---

尝试使用全局变量，如

colorCode

，并将其初始化为零-

colorCode=0

并调用函数

onClick=“ChangeBGColor（）”

var=1；
函数单击（）
{
如果（单击否==1）
{
document.getElementById（'x'）.style.border=“solid 1px red”；
}
如果（单击否==2）
{
document.getElementById（'x'）.style.border=“实心1px蓝色”；
}
如果（单击否==3）
{
document.getElementById（'x'）.style.border=“solid 1px red”；
单击否=1；
}
单击否++；
}

喜欢在这里使用类。如果在这些元素中添加了多个类，那么就会失败，尽管这很好，坚持新样式的要求本质上依赖于旧样式，而不依赖于点击的次数（至少在我看来）.正确，但这只是为了处理@weaponx提到的案件。对我来说似乎是干净和合乎逻辑的，但我没有设法让它起作用。我想我做错了什么。我使用wordpress，将你的风格复制到ant中，将你的函数复制到ant中，并将两者都放在标题区域。你能帮我做这个吗？（是的，我是一名编码新手）也许还值得一提的是，我有更多的onclick事件，与onmouseenter和onmouseeve事件相同，除了多个onclick之外，所有事情都很顺利…工作！这几乎正是我所需要的。几乎，因为重置部分有问题-它不会恢复第一次单击之前的状态（linkClick==0），所以我需要额外单击一次才能“关闭圆”。你有解决这个问题的办法吗？没关系，我自己已经弄明白了，然后把这个办法贴出来了。顺便说一句，我真的很喜欢这种方法，再简单不过了。谢谢；）它可以工作，但只适用于一个特定的div。谢谢您的帮助。@weaponx I如果您想全局使用它，只需键入

body

tag的

onclick

function changeBorder(ele){

 var colors = ["1px solid black", "1px solid red", "1px solid blue"];
 var curInd = colors.indexOf(ele.style.border);

 if(curInd != colors.length-1){  //If the current color isn't the last one
    //Next color
    ele.style.border = colors[curInd++];
 } else {
    //Reset to first color
    ele.style.border = colors[0];
 }
}

<script> 
var linkClick = 0; 
  function update_link(obj){ 
  if (linkClick == 0){obj.style.border = 'solid 1px red'};
  if (linkClick == 1){obj.style.border = 'solid 1px blue'};
  if (linkClick >1 ) {obj.style.border = 'solid 1px red'; linkClick=0};
  linkClick++; 
}
</script>

<a href='#' onclick='update_link(this)'> my link </a>

function ChangeBGColor()
{
    colorcode++;
    var color='';

    if (colorcode==1)
    {
        color='red';
    }
    else if (colorcode==2)
    {
        color='blue';    
    }
    else
    {
        colorCode=0; /*Reset to zero if colorCode =3 or more*/
        color='gray';
    }

    this.style.border="'solid 1px "+color+ "';" /* Need to correctly apply style for the specific contol*/
}

<div id="x" onclick="Clicked"></div>
<script type="text/javascript">
   var clickno=1;
   function Clicked()
   {
      if(clickno==1)
      {
         document.getElementById('x').style.border="solid 1px red";
      }
      if(clickno==2)
      {
         document.getElementById('x').style.border="solid 1px blue";
      }
      if(clickno==3)
      {
         document.getElementById('x').style.border="solid 1px red";
         clickno=1;
      }
      clickno++;
   }
</script>