Javascript 更改文本颜色 onclick 并更改回其他项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8144578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing text color onclick and change back for other items
提问by Malachi
I found this in another question/answer and modified it... but it still doesn't work. I'm a js-noob, so.. could someone please help me out? It's probably simple...
我在另一个问题/答案中找到了这个并修改了它......但它仍然不起作用。我是一个 js-noob，所以..有人可以帮我吗？应该很简单吧...
<script>
document.getElementById('change').onclick = changeColor;
function changeColor() {
document.body.style.color = "red";
return false;
}
</script>
<div id="myid" onclick="changeColor(this); return false;">Hello Here !!</div><br>
<div id="myid2" onclick="changeColor(this); return false;">Hello There !!</div><br>
My issue is: When I run this, both should have black color. When I click on the first, ONLY THAT one should turn red. If after that I click on the second one, the first one should be black again and only the second one red... How do I do this? (jquery would be welcome as well, if that has a solution...)
我的问题是：当我运行这个时，两者都应该是黑色。当我点击第一个时，只有那个应该变成红色。如果之后我点击第二个，第一个应该再次变黑，只有第二个是红色的......我该怎么做？（如果有解决方案，jquery 也会受到欢迎......）
Thanks!
谢谢！
采纳答案by Malachi
Thank you Edwin. I did some googling and fiddled around with something I found and it does exactly what I want to do. Sorry for the confusion.. I picked the divs and if I could get that to work, then I would implement it for my li's.. Anyway, the solution is:
谢谢埃德温。我做了一些谷歌搜索并摆弄了我发现的东西，它完全符合我想要做的事情。抱歉造成混乱..我选择了 div，如果我可以让它工作，那么我会为我的 li 实现它..无论如何，解决方案是：
javascript part:
javascript部分：
function switchColors(element)
{
links=document.getElementsByTagName("li") ;
for (var i = 0 ; i < links.length ; i ++)
links.item(i).style.color = 'black' ;
element.style.color='orange' ;
}
and the html stuff that needed the color change:
以及需要更改颜色的 html 内容：
<ul>
<li onclick="switchColors(this);">Link 1</li>
<li onclick="switchColors(this);">Link 2</li>
<li onclick="switchColors(this);">Link 3</li>
</ul>
回答by Edwin
Here's your solution.
这是您的解决方案。
It's not the best, but considering the mistakes you made copying the code, you might want to check out Wikiversity's page on Beginning JavaScript, as well as their challenges.
这不是最好的，但考虑到您在复制代码时所犯的错误，您可能需要查看Wikiversity 的关于 Beginning JavaScript 的页面，以及他们的挑战。
Also, a list of errors in the code you copied, so you can avoid these problems again:
此外，您复制的代码中的错误列表，因此您可以再次避免这些问题：
- The first line of script gets an element with ID 'change'. No such ID exists in your HTML.
document.bodydoes not return a valid JavaScript object with which you can access.style.color.changeColor()does not accept any arguments, so you should not be calling it withchangeColor(this).- Do not use inline DOM. I.e., do not use the
onclickattribute in the HTML. HTML is meant for layout, not scripting. - (Added by @roselan in the comments below) Instead of using $.css or JavaScript's native .style, use predefined CSS style rules and switch elements' classes to get the desired effect. (an example of this practice can be found in the solution.)
- 脚本的第一行获取一个 ID 为“change”的元素。您的 HTML 中不存在此类 ID。
document.body不返回您可以访问的有效 JavaScript 对象.style.color。changeColor()不接受任何参数，因此您不应使用changeColor(this).- 不要使用内联 DOM。即，不要
onclick在 HTML 中使用该属性。HTML 用于布局，而不是用于编写脚本。 - （由@roselan 在下面的评论中添加）不要使用 $.css 或 JavaScript 的原生 .style，而是使用预定义的 CSS 样式规则并切换元素的类以获得所需的效果。（可以在解决方案中找到这种做法的示例。）
And most importantly, layout should remain in HTML, scripting in JavaScript, and styling in CSS.
最重要的是， 布局应保留在 HTML 中，脚本应保留在 JavaScript 中，样式应保留在 CSS 中。
