테스트 사이트 - 개발 중인 베타 버전입니다

셀렉트박스에 값별로 addClass 주고 싶은데 채택완료

심심한나쵸 2년 전 조회 4,218

옵션에 css를 입혀야 해서 select 태그가 아닌 ul 로 구현한 셀렉트박스입니다.

여기서 1,2 를 선택했을때만 특정 class를 추가하고 싶은데

현재는 어떤 값을 선택해도 class가 추가되고 있는데 어떤걸 수정해야 할지 감이 안잡힙니다 ㅠㅠ

 

</p>

<p><div class="slcBox"></p>

<p>                                            <div class="select"></p>

<p>                                                <div class="selected"></p>

<p>                                                  <div class="selected-value">선택</div></p>

<p>                                                  <div class="arrow"></div></p>

<p>                                                </div></p>

<p>                                                <ul class="operate"></p>

<p>                                                  <li class="option opt2">1</li></p>

<p>                                                  <li class="option opt2">2</li></p>

<p>                                                  <li class="option opt1">3</li></p>

<p>                                                  <li class="option opt1">4</li></p>

<p>                                                  <li class="option opt1">5</li></p>

<p>                                                  <li class="option opt1">6</li></p>

<p>                                                </ul></p>

<p>                                            </div></p>

<p>                                            <span class="count">학년</span></p>

<p>                                        </div></p>

<p> </p>

<p>                                        <div></p>

<p>                                            <input type="text"></p>

<p>                                            <span class="count">반</span></p>

<p>                                        </div></p>

<p>                                        <div></p>

<p>                                            <span>학급 인원 수</span></p>

<p>                                            <input type="text"></p>

<p>                                            <span class="count">명</span></p>

<p>                                        </div></p>

<p>                                    </td></p>

<p>

 

</p>

<p>// 1,2 선택하면 radio 활성화 / 비활성화</p>

<p>$('.operate li').on('click', function(e) {</p>

<p>  console.log($(this).val());</p>

<p>  const num = Number($(this).val())</p>

<p> //  숫자값으로 변환</p>

<p>     if($(this).val =1) {</p>

<p>         $('.HgGrdChk').addClass("off")</p>

<p>     }</p>

<p> })</p>

<p>

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
2년 전

※ https://yulfsong.tistory.com/37

※ https://ko.javascript.info/comparison

</p>

<p>$('.operate li').on('click', function() {

    let num = Number($(this).text());

    

    if (num == 1) {

        $('.HgGrdChk').addClass("off");

    }

});</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

플라이
2년 전

</p>

<p><script>

$('.operate li').on('click', function(e) {

  const num = Number($(this).text())

 //  숫자값으로 변환

     if(num =1) {

         $('.HgGrdChk').addClass("off")

     }

 })

</script></p>

<p>

 

스크립트값을 text 방식으로 가져오시면 될듯 합니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

심심한나쵸
2년 전
[code]
$('.operate li').on('click', function(e) {
const text = String($(this).text())
if(text = 1) {
$('.HgGrdChk').addClass("off")
} else {
$('.HgGrdChk').removeClass("off")
}
})
[/code]

이렇게 적었는데도 안되는데 뭘 수정하면 될까요..?
플라이
2년 전
HgGrdChk class 값이 현재 소스에는 보이지 않는데 alert(text); 값이 정상적으로 나오는지 찍어 보시고 그에 따라 class 부분이 제대로 존재하고 있는지 체크해 보셔야 할듯 합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인