点击更改文本颜色并将其他项目更改回来

Question

点击更改文本颜色并将其他项目更改回来

4

我在另一个问题/答案中找到了这个代码，并进行了修改...但仍然不起作用。我是一个 JS 新手，所以...有人能帮帮我吗？它可能很简单...

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

我的问题是：当我运行这个程序时，两个都应该是黑色的。当我点击第一个时，只有那一个应该变成红色。如果之后我再点击第二个，第一个应该再次变成黑色，只有第二个是红色的...我应该怎么做？（如果使用jquery有解决方案也可以）谢谢！

- Malachi

2

首先，在您的HTML中没有使用此ID的元素，因此您需要在“change”ID上执行getElementById。然后，您通过单击事件调用changeColor函数，并将“this”作为参数传递，但是changeColor函数不处理任何参数（blablacanworkblabla）。最后，将处理程序放在内联HTML中是一种不好的做法。 - roselan

还有，@roselan 说的一切都是正确的。 - Edwin

2个回答

4

谢谢Edwin。我做了一些搜索，并尝试了一些我发现的东西，它正好可以实现我想要的功能。对于混淆感到抱歉..我选择了divs，如果我能让它工作，那么我将为我的li实现它..

无论如何，解决方案是:

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:

<ul>  
<li onclick="switchColors(this);">Link 1</li>  
<li onclick="switchColors(this);">Link 2</li>  
<li onclick="switchColors(this);">Link 3</li>  
</ul>

- Malachi

刚跑了一下，这个代码根本不起作用。而且，当你使用这段代码时，你完全忽略了我在回答中和@roselan的评论中的建议。 - Edwin

它对我来说很好用。JavaScript不在头部，而是在页面底部的脚本中...至少，这就是我设置的方式，它可以工作。至于“忽略”...我把它理解为“给出的代码是一段[填空]，你需要做大量的更改”。既然我想要使用li，我就寻找了另一个解决方案，进行了编辑，并得到了上面发布的内容。至于使用预定义规则...你是指通过js更改类而不是更改“li”（在这种情况下）吗？据我所知，仅通过css无法实现我想要做的事情... - Malachi

是的，可以使用jQuery的$(obj).addClass("red")后跟$(obj).removeClass("black")，或者使用本地的obj.class = "red"在颜色之间切换，其中CSS为.red { color: #f00; }和.black { color: #000; }。另外，您还可以尝试使用$(obj).toggleClass("red"); $(obj).toggleClass("black");。 - Edwin

还有几件事情...通常在网上找到的东西都是为了给完全不熟悉这门语言的人一个介绍而编写的示例，因此使用了一些可怕的、可怕的编码方法。我猜这就是其中之一。另外，如果你想要更快的回复，请在你的帖子/评论中标记我 @Edwin。 - Edwin

但是对于这种情况，是否有可能在页面加载时将链接1设置为默认的黑色而不是其他颜色呢？ - mathiasF

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Edwin · Accepted Answer

这是你的解决方案。

虽然不是最好的，但考虑到你复制代码时犯了错误，你可能想查看Wikiversity的JavaScript入门页面以及他们的挑战。

此外，以下是你复制代码中存在的错误列表，以便避免再次出现这些问题：

脚本的第一行获取ID为“change”的元素。你的HTML中不存在这个ID。
document.body不能返回有效的JavaScript对象，无法访问.style.color。
changeColor()不接受任何参数，因此你不应该使用changeColor(this)来调用它。
不要使用内联DOM。即，在HTML中不要使用onclick属性。HTML仅用于布局，而非脚本。
（由评论中的@roselan添加）不要使用$.css或JavaScript的本机.style，使用预定义的CSS样式规则并切换元素的类来获得所需的效果。（可以在解决方案中找到此练习的示例。）

最重要的是，布局应保留在HTML中，脚本应在JavaScript中，样式应在CSS中。