jQuery id 값 추출 반영 재 질문합니다.
본문
<div id="forma">
<span>내용1</span>
<span>내용2</span>
<span>내용3</span>
<font>내용4</font>
</div>
<div id="formb">
<span>내용1</span>
<span>내용2</span>
<span>내용3</span>
<font>내용4</font>
</div>
<div id="formc">
<span>내용1</span>
<span>내용2</span>
<span>내용3</span>
<font>내용4</font>
</div>
<div id="formd">
<span>내용1</span>
<span>내용2</span>
<span>내용3</span>
<font>내용4</font>
</div>
$("#forma span, #formb span, #formc span, #formd span ").click(function(){
$(this).css({borderClor : "#FFF", background : "#fff"});
});
이렇게 했더니
div 의 span 값이 변경됩니다.
세개중 아무거나 클릭해도
div의 borderClor와 background 가 변경되도록 부탁드립니다.
답변 5
$("div[id^='form']").on("click", function() {
$(this).css({border: "1px solid #fff", background: "#fff"});
});
$(this).parent().css({borderClor : "#FFF", background : "#fff"});
질문에 대한 답변으로 정확히 말씀해주신것 같은데..
실례지만 질문을 다시 정리해서 말씀해주시겠어요???
span을 클릭했을때 그 스판의 색상만 변경되게 하고싶으신건지,
Div안의 span을 클릭했을때 그 span의 부모인 div가 변경되게 하고싶으신건지
$("#forma span, #formb span, #formc span, #formd span ").click(function(){
$('#forma span').css({borderClor : "#FFF", background : "#fff"});
$('#formb span').css({borderClor : "#FFF", background : "#fff"});
$('#formc span').css({borderClor : "#FFF", background : "#fff"});
$('#formd span').css({borderClor : "#FFF", background : "#fff"});
});
아하 이유를 찾았습니다.
$(this).parent().css({border:"4px solid #fff", background:"#fff"});
이게 정답인데
제가 실제 사용하는 소스는 span 앞에 div 가 하나씩 더 있습니다. 즉
<div id="forma">
<div class=""aaa"><span>내용1</span></div>
<div class=""aaa"><span>내용2</span></div>
<div class=""aaa"><span>내용3</span></div>
<div class=""aaa"><font>내용4</font></div>
</div>
이러니 첫번째 부모가 반영되는 것입니다.
그래서 parent()를 두개 붙였더니 원하는 동작이 됩니다.
즉
$(this).parent().parent().css({border:"4px solid #fff", background:"#fff"});
이렇게 parent().를 두개 붙였더니
잘 작동이 되는데,
이렇게 사용해도 되는지요?