javascript(vue) class명으로 글자색바꾸고싶은데요
본문
위이미지에서 처럼 앞쪽 체크이미지는 정상작동을 하는데 name 값으로 구분하였습니다
뒤쪽 글자색을 파란색으로 들어오게하고싶은데
두개의 문제중 한쪽 문제쪽에서만 클래스명으로 색깔을 바꿔주고있습니다
<div id="content" class="etc">
<div class="cell">
<div class="inner">
<p class="inner-txt">설문을 통해 자신의 삶의 만족도가 어느 정도인지 진단해 보세요. 10분정도 걸리는 간단한 설문입니다.</p>
<p class="line02"></p>
<p class="survey-tit">행복에 관한 조사입니다.</p>
<p class="txt-tit">01. 다음 지문을 읽고 <span class="underline">틀린 것</span>을 고르시오. (5점)</p>
<p class="inner-txt op65 mb20">Java 기반의 웹 프레임워크. 로드 존슨이 2002년에 출판한 저서 Expert One-on-One J2EE Design and Development에서 선보인 소스 코드를 시작으로 점점 발전하게 되었다. 2003년 6월에 최초로 공개되었다. </p>
<ul class="ul-block com-rdo">
<li>
<label class="labelRdo" @click="activate(1)">
<input type="radio" class="rdo" name="test-rdo">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 1 }" >전혀 아니다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(2)">
<input type="radio" class="rdo" name="test-rdo" >
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 2 }" >아니다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(3)">
<input type="radio" class="rdo" name="test-rdo">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 3 }">보통이다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(4)">
<input type="radio" class="rdo" name="test-rdo">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 4 }"> 그렇다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(5)">
<input type="radio" class="rdo" name="test-rdo">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 5 }"> 매우 그렇다</span>
</label>
</li>
</ul>
<p class="hr"></p>
<p class="txt-tit mb20">02. 나는 OO하는 것을 좋아한다.</p>
<ul class="ul-block com-rdo">
<li>
<label class="labelRdo" @click="activate(6)">
<input type="radio" class="rdo" name="test-rdo-2">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 6 }">전혀 아니다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(7)">
<input type="radio" class="rdo" name="test-rdo-2" >
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 7 }">아니다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(8)">
<input type="radio" class="rdo" name="test-rdo-2">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 8 }">보통이다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(9)">
<input type="radio" class="rdo" name="test-rdo-2" >
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 9 }"> 그렇다</span>
</label>
</li>
<li>
<label class="labelRdo" @click="activate(10)">
<input type="radio" class="rdo" name="test-rdo-2">
<span class="ico">
<span class="ico chk-blue"></span>
</span>
<span class="label" :class="{ color_clr2 : active_el == 10 }"> 매우 그렇다</span>
</label>
</li>
</ul>
</div>
<!-- //inner -->
</div>
</div>
<!-- floatingbtn -->
<div class="absBtmBtn">
<button type="button" class="btn md clr1">제출</button>
</div>
<!-- //floatingbtn -->
</div>
<!-- //container -->
</div>
<!-- //wrap -->
</template>
<script>
export default {
name: 'Study_04_SO_quiz_OX',
props: {
},
/* vue lifecycle */
created () {
},
mounted () {
},
/* vue data */
data () {
return {
headerType: 1,
active_el: 0
}
},
/* vue function */
methods: {
activate: function (el) {
if(this.active_el > 5){
this.active_el = el
return false
}else if(this.active_el <= 5){
this.active_el = el
}
}
}
}
</script>
위쪽 v-on:click발생시 el요소로 전달받아서 1~5번까지 불을 바꾸고 파란색을 냄겨둔체
마찬가지로 아래쪽문제는 6~10번으로 파란색이 들어오도록하려했습니다
하지만 정상작동하지안고 1~10번중 v-on:click이 발생한 요소만 파란색으로 변경되었습니다
name 속성으로 check 이미지는 정상적으로 바뀌는데 글자색을 변경이 안되 고민입니다..
왜이렇게 작동하는건지 설명해주시면 감사하겟습니다 !
답변 1
클릭한 input의 부모요소를 찾아서 변경하는 방법으로 해결할 수 있습니다.
아래의 스크립트로 해보세요. 클릭한 항목만 변경됩니다.
<script>
$(document).ready(function() {
$('#content').on('click', 'input[type=radio]', function(e) {
var sss = $(this).attr('name'); // 클릭한 input의 name (각 문제마다 name값이 다른 경우)
$("input[name="+sss+"]").parents("label").css({"color":"#000"}); // 클릭한 요소의 부모요소의 스타일을 모두 바꿈.
$(e.currentTarget.parentElement).css({"color":"blue"}) // 선택한 부모요소만 스타일 변경
});
});
</script>