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

Posted 2023-02-24

【中文标题】单个 div 上的多个 onclick 事件 - 更改 div 边框颜色 - javascript

【英文标题】：multiple onclick events on a single div - changing the div border colors - javascript

【发布时间】：2013-08-02 11:16:51

【问题描述】：

我已经把这段代码放在了 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++; 

感谢大家的帮助；）

【参考方案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;

    

希望对您有所帮助。 :)

编辑：语法错误。

【讨论】：

喜欢这里使用的类。如果将多个类添加到这些元素中，则会崩溃

这太好了，坚持要求新样式本质上依赖于旧样式，而不是点击了多少次（至少据我了解）。

正确，但只是为了处理@weaponx 提到的情况。

对我来说似乎干净且合乎逻辑，但我没有设法让它发挥作用。我想我做错了什么。我使用 wordpress，我已经将您的样式复制到 中，并将您的函数复制到 中，并将其放在标题区域中。你能帮我解决这个问题吗？ （是的，我是编码新手）

也许还值得一提的是，我有更多的 onclick 事件，与 onmouseenter 和 onmouseleave 事件相同，并且除了多次 onclick 之外，一切都很顺利...

【参考方案2】：

<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>

【讨论】：

有效！这几乎正​​是我所需要的。几乎，因为重置部分有问题 - 它不会恢复第一次点击之前的状态（linkClick == 0），所以我需要额外点击 1 次才能“关闭圆圈”。您对此有解决方案吗？

没关系，我已经自己解决了这个问题并发布了解决方案。顺便说一句，我真的很喜欢这种方法，不能更干净和简单。谢谢;)

【参考方案3】：

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

x.onclick = method1;

function method1()

x.onclick = method2;


funbction method2()

x.onclick = method3;


function method3()

x.onclick = method1;

【参考方案4】：

你可以使用整数

onclick="my_function()"

然后：

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

【参考方案5】：

最好使用 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;
    

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

并在 HTML 中使用，

onclick="changeBorder()" 

【参考方案6】：

类似的东西。假设默认边框是“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 here

【参考方案7】：

尝试使用像colorCode 这样的全局变量并将其初始化为零—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*/

【参考方案8】：

<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>

【讨论】：

它有效，但仅适用于一个特定的 div。感谢您的帮助。

@weaponx 如果你想在全局范围内使用它，只需输入body 标签的onclick 的属性