Javascript jQuery在单击时更改多个元素的颜色

谢谢，这里的初学者

格式在JSFIDLE中不起作用，但这与我的问题无关

以下是我所拥有的：

我想做的是，当单击红色div时，将h1文本和导航栏中所有蓝色的元素都更改为红色

$(document).ready(function(){
    $('.colorred').click(function(){
        $('.over', '#thispage').css({"background-color", "#821122"});
        $('h1', '.nav').css({"color", '#821122'});
    });
});

---

目前所发生的一切是，它使我所指的元素永远不会出现，它们会消失

选择器和css方法参数中的逗号有问题

这是您的代码：

$('.over', '#thispage').css({"background-color", "#821122"});
$('h1', '.nav').css({"color", '#821122'});

我就是这样做的：

$('.over, #thispage').css("background-color", "#821122");
$('h1, .nav').css("color", '#821122');

因此，如果您需要多个选择器，只需添加逗号，不要使用两个不同的参数

然后，css。作为参数，您可以指定键、值（我已指定）或对象（您尝试执行），但正确的语法是：

$('h1, .nav').css({"color": '#821122'});

对于多个规则：

$('h1, .nav').css({"color": '#821122', "background-color": "#821122"});

---

在这里查看它的工作情况：

您可以使用JavaScript来完成此操作，无需使用JQuery

我在大学里做了一个简单的HTML颜色改变项目，你必须做完全相同的事情

<div class="javascriptcolours">
    <a href=javascript:void(0) onClick="changeBgcolor('#333333'); changeColor('#000000'); changeText('#ffffff'); changeBanner('images/banner.png'); changeHeader('images/cost_header.png'); changeMedia('images/cost_media.png'); changeLinkbox1('images/nav_plot.png'); changeLinkbox2('images/nav_director.png'); changeLinkbox3('images/nav_actors.png'); changeLinkbox4('images/nav_location.png'); changeLinkbox5('images/nav_cost.png'); changeFoot('#000000'); changeLinks('#808080');"><img src="Images/black.png" alt="Black" /></a>
    <a href=javascript:void(0) onClick="changeBgcolor('#999999'); changeColor('#ffffff'); changeText('#000000'); changeBanner('images/banner_white.png'); changeHeader('images/cost_header_black.png'); changeMedia('images/cost_media_white.png'); changeLinkbox1('images/nav_plot_white.png'); changeLinkbox2('images/nav_director_white.png'); changeLinkbox3('images/nav_actors_white.png'); changeLinkbox4('images/nav_location_white.png'); changeLinkbox5('images/nav_cost_white.png'); changeFoot('#ffffff'); changeLinks('#808080');"><img src="Images/white.png" alt="White" /></a>
    <a href=javascript:void(0) onClick="changeBgcolor('#a00000'); changeColor('#ff3332'); changeText('#ffffff'); changeBanner('images/banner_red.png'); changeHeader('images/cost_header.png'); changeMedia('images/cost_media_red.png'); changeLinkbox1('images/nav_plot_red.png'); changeLinkbox2('images/nav_director_red.png'); changeLinkbox3('images/nav_actors_red.png'); changeLinkbox4('images/nav_location_red.png'); changeLinkbox5('images/nav_cost_red.png'); changeFoot('#ff3332'); changeLinks('#ff9999');"><img src="Images/red.png" alt="red" /></a>
</div>

---

只要html代码顶部的onClick和JS文件中的函数相同，那么在您的情况下，您可能希望将其称为changeBgcolor而不是changeColor。

感谢您解决了这个问题，但现在我遇到了另一个问题，“.over”悬停函数似乎没有改变背景颜色？单击红色div后，背景仍将更改为。这附近有人吗？没问题。这是因为您将样式直接添加到元素中。相反，我建议您向nav元素添加一个类，并使用CSS定义所有组合。这样，一切都会成功。

<img src="Images/red.png" alt="red" />

function changeColor(colorIn)
    {
        document.getElementById("navigation").style.backgroundColor = colorIn;
        document.getElementById("maininfo").style.backgroundColor = colorIn;
        document.getElementById("mediaframe").style.backgroundColor = colorIn;
    }