셀렉트박스에 값별로 addClass 주고 싶은데

셀렉트박스에 값별로 addClass 주고 싶은데

QA

셀렉트박스에 값별로 addClass 주고 싶은데

본문

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

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

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

 


<div class="slcBox">
                                            <div class="select">
                                                <div class="selected">
                                                  <div class="selected-value">선택</div>
                                                  <div class="arrow"></div>
                                                </div>
                                                <ul class="operate">
                                                  <li class="option opt2">1</li>
                                                  <li class="option opt2">2</li>
                                                  <li class="option opt1">3</li>
                                                  <li class="option opt1">4</li>
                                                  <li class="option opt1">5</li>
                                                  <li class="option opt1">6</li>
                                                </ul>
                                            </div>
                                            <span class="count">학년</span>
                                        </div>
 
                                        <div>
                                            <input type="text">
                                            <span class="count">반</span>
                                        </div>
                                        <div>
                                            <span>학급 인원 수</span>
                                            <input type="text">
                                            <span class="count">명</span>
                                        </div>
                                    </td>

 


// 1,2 선택하면 radio 활성화 / 비활성화
$('.operate li').on('click', function(e) {
  console.log($(this).val());
  const num = Number($(this).val())
 //  숫자값으로 변환
     if($(this).val =1) {
         $('.HgGrdChk').addClass("off")
     }
 })

 

3554271915_1675389002.5.png

이 질문에 댓글 쓰기 :

답변 2

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

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


$('.operate li').on('click', function() {
    let num = Number($(this).text());
    
    if (num == 1) {
        $('.HgGrdChk').addClass("off");
    }
});

<script>
$('.operate li').on('click', function(e) {
  const num = Number($(this).text())
 //  숫자값으로 변환
     if(num =1) {
         $('.HgGrdChk').addClass("off")
     }
 })
</script>

 

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


 $('.operate li').on('click', function(e) {
  const text = String($(this).text())
     if(text = 1) {
         $('.HgGrdChk').addClass("off")
     } else {
      $('.HgGrdChk').removeClass("off")
     }
 })


 이렇게 적었는데도 안되는데 뭘 수정하면 될까요..?

HgGrdChk class 값이 현재 소스에는 보이지 않는데 alert(text); 값이 정상적으로 나오는지 찍어 보시고 그에 따라 class 부분이 제대로 존재하고 있는지 체크해 보셔야 할듯 합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT