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

Question

谢谢，初学者在这里。

格式实际上在jsfiddle中不起作用，但这与我的问题无关。

这是我所拥有的： http : //jsfiddle.net/8X7ZE/1/

我想做的是单击红色div时将所有具有蓝色的元素更改为红色（h1文本和导航栏）。

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

当前发生的所有事情都是使我指向的元素永不出现（它们淡入）。

Answer 1

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

这是您的代码：

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

这是我的方法：

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

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

然后，css（）。 作为参数，您可以指定我做过的key, value或尝试做的对象，但是正确的语法是：

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

对于多个规则：

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

看到它在这里工作： http : //jsfiddle.net/8X7ZE/2/

Answer 2

您可以为此使用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>

所以基本上上面的代码具有您正在使用的主要图像或div ...

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

这是附加到该站点的JS文件中的changeColor方法的示例，该示例获取导航，maininfo和mediaframe这三个元素，然后将颜色与上面的代码一起传递。

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

只要html代码中的onClick（顶部）和JS文件中的函数相同，因此在您的情况下，您可能需要将其命名为changeBgcolor而不是changeColor。