0

我已将此代码放入 div 中：

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

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

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

编辑：

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

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

（我在里面的标题区域放了一个函数<script></script>）

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

有人可以帮忙吗？

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

编辑3：我编辑了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++; 
}

谢谢大家的帮助；）

4

8 回答 8

2

您可以使用函数和 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;

    }
}

希望有帮助。:)

编辑：语法错误。

于 2013-08-02T11:25:00.477 回答
0

尝试使用全局变量colorCode，并将其初始化为零——<code>colorCode=0

并调用一个函数onClick="ChangeBGColor()"

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*/
}
于 2013-08-02T11:31:54.830 回答
0 
<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>
于 2013-08-04T11:17:24.773 回答
0

最好为此使用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()"
于 2013-08-02T11:24:22.323 回答
0

像这样的东西。假设默认边框是“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 实现，请包括在此处找到的 shim

于 2013-08-02T11:27:27.933 回答
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>

HTML

<a href='#' onclick='update_link(this)'> my link </a>
于 2013-08-02T11:27:41.800 回答
0

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

x.onclick = method1;

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

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

function method3()
{
x.onclick = method1;
}
于 2013-08-02T11:23:27.217 回答
0

您可以使用整数

onclick="my_function()"

接着：

function my_function(){
  i++;
  if(i == 1){
    //red
  }
  if(i == 2){
    //blue
  }
  if(i == 3){
    i = 0;
    // reset
  }
}
于 2013-08-02T11:23:51.593 回答