jQuery改變多個元素的顏色點擊

格式化在jsfiddle中不起作用，但這對我的問題無關緊要。

我試圖做的是改變所有與藍色到紅色（H1的文本和導航欄）點擊紅色div時的元素。

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

目前發生的所有事情是它使得我指出永遠不會出現的元素（它們淡入）。

來源

2014-02-22 MarcoDinos

您在選擇器和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/

來源

2014-02-22 04:10:55 Shomz

感謝您解決這個問題，但現在我又遇到了另一個問題，'.over'（懸停功能）似乎沒有改變背景顏色？在點擊紅色div後，背景仍將變爲。有沒有解決的辦法？ – MarcoDinos

沒問題。這是因爲你直接向元素添加樣式。相反，我建議你給你的'＃nav'元素添加一個類，並使用CSS來定義所有的組合。這樣，一切都會奏效。 – Shomz

你可以使用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; 
    }

只要在的onClick HTML代碼（頂部）和功能在您的JS文件是相同的，所以你的情況，你可能會想將它命名changeBgcolor代替changeColor。

來源

2014-02-22 04:15:58 anthonycook2014

jQuery改變多個元素的顏色點擊

回答

相關問題