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。