Question

谢谢，初学者。

格式化在jsfiddle中并不真正起作用，但这与我的问题无关。

当我点击红色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方法的一个示例，它抓取三个元素navigation，maininfo和mediaframe，然后puts允许使用上面的代码传入颜色。

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

只要你的JS文件中的html代码（顶部）和函数中的onClick是相同的，所以在你的情况下你可能想要把它称为changeBgcolor而不是changeColor。

jQuery在点击时改变多个元素的颜色

2 个答案: