질문/공유질답게시판

JS 관련 질문드립니다

스포
Extra Form
PHP PHP 7.3
CMS Rhymix

JS 파일 하나에서 toggleclass 와 if문을 함께 사용하고 있습니다 

 

 

$(window).load(function(){
         $('#open').click(function() {
         $('li.has_rank_only').toggleClass('off');
         if($("li.has_rank_only").hasClass("off") === true) {
 
                <사용 스크립트>
         })
    });

 

open 을 클릭하면 toggleclass 를 이용하여 li.has_rank_only 에 on 클래스가 off 를 추가하고 추가되면 if문에서 스크립트를 실행하게되어있는데

 

open을 다시 클릭하여 off클래스가 없어져도 스크립트가 그대로 실행됩니다

 

js 특성상 스크립트가 한번 로드된데로 그대로 실행되는거같은데 li.has_rank_only가 off일때는 스크립트가 실행되고, 아닐때는 if문 안에있는 스크립트를 무효시키는 방법이 있을까요?

위로 아래로
댓글 11
  • ? 
    $(window).load(function(){
    $('#open').click(function() {
        var $has_rank_only = $("li.has_rank_only");
        if (!$has_rank_only.hasClass("off")) {
            $has_rank_only.addClass('off');
            // 여기에 사용 스크립트

        } else {
            $has_rank_only.removeClass('off');
        }

    });
});

     

     

    위 스크립트로 하면 될듯 한데

    혹시 버튼을 클릭하면 on <-> off로 바뀌는건가요?

  • ? ?
    아 아니요 확인해보니 toggleClass 로 off가 없어집니다 해서

    else if($("li.has_rank_only:eq").hasClass("off") === true){
    alert("off");

    }

    해서 확인해보니 off까지는 뜨는데 if문에서 실행한 스크립트는 고대로 남아있습니다
  • ? ?
    혹시 li.has_rank_only 가 html상에서 여러개인가요?
  • ? ?

    widget_m.zip

     

    사용하는 js 소스입니다.. 홈페이지 주소는 쪽지로 드렸습니다

    Atachment
    첨부
  • ? ?
    사용하는 실소스는 질문글에 올린 소스와 조금 다릅니다 li.has_rank_only는 li 로 eq로 구분해서 on,off 하고있습니다
  • ? ?

    그렇다면 on일땐 off, off일땐 on으로 하는게 목표인가요?

    그리고 올려주신 소스에 li.has_rank_only:eq(1)라고 되어있는데 맨 첫번째것만 체크하는게 맞나요?
    아니면 모두를 하되 하나라도 해당이 된다면 스크립트를 실행하는건지, 해당되는 갯수만큼 스크립트를 실행하는건지 알려주세요.

     

    그리고 알려주신 사이트에서 open 버튼이 어디 있는지 알려주시면 도움이 될 것 같습니다.

  • ? ?

    도움주셔서 정말 감사합니다

    캡처.PNG

    모바일에서보면 인기글 옆에 + 가 open 버튼이고

    li.has_rank_only:eq(0) 1번째  li.has_rank_only:eq(1) 2번째 즉  li.has_rank_only:eq(1) 은 닫았을때 노출되지 않은 li입니다 클래스가 off임녀 노출되지않습니다 open버튼을 눌러 toggle하면 off 클래스가 없어져서 해당 li들이 노출됩니다 첫번째것만 체크하고있습니다

     

    if문은 정상적으로 동작하는거 같은데 if문 이후 toggle로 클래스를 지워도 해당 스크립트가 유지되는거같습니다

     

    제가 하고자하는건  li.has_rank_only:eq(1) 가 off일때만 페이징이 불가능하고 off가 없을때만 페이징 하는것입니다 페이지 첫 로드때는  li.has_rank_only:eq(1) 가 off이니 페이징이 불가능한데, 한번 open버튼으로 오픈했다가 닫으면  li.has_rank_only:eq(1)  class 가 off여도 좌우 페이징이(스크롤) 닫은상태로 가능합니다

     

     

     

  • ? ?

    첨부된 파일껄로 적용해보세요.

    Atachment
    첨부
  • ? ?
    정말 감사합니다.. 정상동작합니다 어떻게 하신건지 알수있을까요?
  • ? ?

    문제의 핵심은 has_rank_only off가 아닌 슬라이더의 생성, 파괴 부분에 있었습니다. (토글 부분은 정상적으로 잘 동작하고 있었습니다)
    처음에 open버튼을 누를때 생성됐던 슬라이더가 목록을 닫을땐 파괴가 되어야 하는데 파괴되지 않은 채로 목록만 닫혀 발생한 문제였습니다.

  • ? ?
    그랬군요.. 감사합니다 ㅠㅠ