다른 div를 클릭하면 div의 배경 이미지를 어떻게 바꿀 수 있습니까?

Question

다른 div를 누르면 한 div의 배경 이미지를 변경하려고합니다. 내가 jQuery를 사용하고 있는데

$('#input_id').click(function() { 
    $('#div_id').css('background-image','url') 
}); 

는 그러나, 나는 하나의 DIV의 배경 이미지를 변경보다 더 할 필요가 ... 이렇게이를 발견, 그것은 또한 몇 가지 다른 애니메이션을해야합니다. 내가 현재 사용하고

...

$('#input_id').click(function() { 
$('#div1').animate({ 
    left: '0px' 
}, 600); 
$('#div2').animate({ 
    left: '-100%' 
}, 1000); 
$('#div3').animate({ 
    right: '-100px' 
}, 200); 
$('#div4').animate({ 
    top: '0px' 
}, 600); 
}); 

나는 목록에이를 추가 할 때이 잘 작동하고 나는 그것을 필요로하는 모든 것을 않지만,이 ...

$('#div5').css({ 
    'background-image', 'url(../images/backgrounds/background2.png)'); 

그것은 작동이 중지 완전히. 이것은 ... 내 전체 코드

$('#input_id').click(function() { 
$('#div1').animate({ 
    left: '0px' 
}, 600); 
$('#div2').animate({ 
    left: '-100%' 
}, 1000); 
$('#div3').animate({ 
    right: '-100px' 
}, 200); 
$('#div4').animate({ 
    top: '0px' 
}, 600); 
$('#div5').css({ 
    'background-image', 'url(../images/backgrounds/background2.png)'); 
}); 

사업부 5에 대한 나의 CSS 배경 이미지의 코드는

... 사람이이 일을 안 어떤 이유를 볼 수

#div5 { 
... 
background-image:url(../images/backgrounds/background1.png); 
... 
} 

? 나는 명백하게 틀린 무엇인가 했느냐, 또는, 어디인가에서 무엇인가 놓쳤다?

Answer 1

나는이 꽤 될 수 있습니다으로 jQuery를에 실제 CSS를 넣어하지 않는 것이 좋습니다 것입니다 놓친 포함 유지하기가 어렵다.

대신 jQuery를 사용하여 클래스를 추가하고 CSS 파일에서 배경 속성을 지정하십시오.

$('#div5').addClass("myclass"); 

.myclass { 
    background-image: url(images/backgrounds/background2.png); 
} 

그런 다음 removeClass() 메소드를 사용하여 제거 할 수 있습니다.

$('#div5').removeClass("myclass"); 

Answer 2

는

$('#div5').css({ 
    'background-image': 'url(images/backgrounds/background2.png)' 
}); 

는 첫째, 코드의 비트 (폐쇄 브래킷이 개 많은)의 끝 부분에 구문 오류가 발생했습니다 2 일을 ...있다.

둘째, 이것은 순수한 추측이지만 CSS 파일은 CSS (또는 스타일) 폴더에있을 가능성이 큽니다. 이미지 폴더를 ../images으로 참조하는 것이 좋지만 페이지에서 실행되는 스크립트에서는 참조 할 수 없습니다. (전선 ../을 제거한 것에 유의하십시오.) 당신의

$('#div5').css({ 
    'background-image', 'url(../images/backgrounds/background2.png)'); 

Answer 3

는 {

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)'); 

Answer 4

당신이 뭔가 "});"

$('#input_id').click(function() { 
    $('#div1').animate({ 
     left: '0px' 
    }, 600); 
    $('#div2').animate({ 
     left: '-100%' 
    }, 1000); 
    $('#div3').animate({ 
     right: '-100px' 
    }, 200); 
    $('#div4').animate({ 
     top: '0px' 
    }, 600); 
    $('#div5').css({ 
     'background-image', 'url(../../images/backgrounds/background2.png)'); 
    }); 
}); 

Answer 5

이 시도 :

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');