在Javascript中使用“this”

我想使用vanilla Javascript来更改标签的颜色，只要使用“this”关键字点击该标签。该元素以红色开始。如果在红色时单击，则会变为绿色。如果在绿色时点击它，则会变为蓝色。如果在蓝色时单击，则会变为红色。在Javascript中使用“this”

看起来很简单，根据我的资源我的代码应该工作，但事实并非如此。我在这里错过了什么？

这里是我的javascript：

<script type="text/javascript"> 
    function changeColor(obj) { 

    if (obj.style.backgroundColor=="#ff0000") { 

      obj.style.backgroundColor="#00ff00"; 

     } else if (obj.style.backgroundColor=="#00ff00") { 

      obj.style.backgroundColor="#0000ff"; 

     } else { 

      obj.style.backgroundColor="#ff0000"; 

     } 
    } 
</script>

这是我的HTML：

<a style="background-color: #ff0000;" onclick="changeColor(this)" href="#">Click me</a>

我觉得这个问题是有关的人谁刚开始学习如何使用 “this” 关键字。

谢谢！

来源

2014-05-12 user3276898

@CBroe *不*这个问题的重复。完全一样。 –

[了解如何调试JavaScript]（http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820） –

该问题与this无关，以及与颜色如何存储在浏览器中有关的一切。

显然，你没有尝试基本的调试，因为alert(obj.style.backgroundColor)将清楚地显示发生了什么。

你最好保存自己的财产。例如：

function changeColor(obj) { 
    obj.__color = ((obj.__color || 0)+1)%3; 
    switch(obj.__color) { 
     case 0: obj.style.backgroundColor = "#ff0000"; break; 
     case 1: obj.style.backgroundColor = "#00ff00"; break; 
     case 2: obj.style.backgroundColor = "#0000ff"; break; 
    } 
}

Demo on jsFiddle

来源

2014-05-12 01:32:26

不知道为什么这个答案是downvoted。 jsfiddle显示它的工作完美。 –

他通过检查'点击次数'来设置'背景颜色'而不是检查背景颜色并设置颜色' – jhyap

@jhyap对不起，我错过了什么？我认为这个想法是做一个循环的背景颜色。 –

的问题是，Element.style.backgroundColor返回RGB格式的颜色。此代码将起作用：

var changeColor = function (obj) { 
    if (obj.style.backgroundColor == "rgb(255, 0, 0)") { 

     obj.style.backgroundColor = "#00ff00"; 

    } else if (obj.style.backgroundColor == "rgb(0, 255, 0)") { 

     obj.style.backgroundColor = "#0000ff"; 

    } else { 

     obj.style.backgroundColor = "#ff0000"; 

    } 
}

但是，请考虑保留您自己对当前颜色的引用。例如：

var colors = ["red", "green", "blue"], ind = 0; 
var changeColor = function (obj) { 
    ind++; 
    ind %= colors.length; 
    obj.style.backgroundColor = colors[ind]; 
}

来源

2014-05-12 01:44:56 soktinpk

当然，假设浏览器选择使用这种格式，而不是其他许多其他格式（十六进制，hsl，rgba，颜色名称，rgb但带有任意可变的空格......） –

在Javascript中使用“this”

回答

相关问题