클릭하면 여러 요소가 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 색상 변경 프로젝트를했습니다. 여기

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

<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가있다 ...

는 사이트에 연결된 내 JS 파일에 changeColor 방법의 예입니다 이것은 세 가지 요소 탐색, maininfo 및 mediaframe을 잡고 puts는 위의 코드로 색상을 전달할 수있게합니다.

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

한 당신은 아마 대신 changeColor의 changeBgcolor를 호출 할 수 있습니다 귀하의 경우 귀하의 JS 파일의 HTML 코드 (위)와 함수에서 온 클릭이, 동일로

.