CSS 멀티 셀렉터 (교차로) 작동하지 않습니다.

Question

jquery를 사용하여 일부 클래스의 표시 속성을 설정 및 해제 할 수 있습니다.

이

jQuery(function($) { 
    $('.fab.red.off').click(function() { 
    $(this).removeClass('off').addClass('on'); 
    $(this).children('.community_service_icon').css('display', 'none'); 
    $(this).children('.community_service_text').css('display', 'block'); 
    }); 
}); 

jQuery(function($) { 
    $('.fab.red.on').click(function() { 
    $(this).removeClass('on'); 
    $(this).addClass('off'); 
    $(this).children('.community_service_icon').css('display', 'block'); 
    $(this).children('.community_service_text').css('display', 'none'); 
    }); 
}); 

첫 번째 클릭 성공적으로 이미지와 디스플레이를 숨 깁니다 : 나는 여기

<div class="fab red off"> 
    <img class="community_service_icon" src="http://placehold.it/50x50"> 
    <div class="community_service_text"> 
     Charity Run<br/> 
     Charity Sale<br/> 
     Bake Sale<br/> 
     Photo Exhibition<br/> 
    </div> 
</div> 

내 JQuery와 함수입니다 클릭에 전환, 이미지와 아래의 텍스트 사이에 교환하는 것을 시도하고있다

텍스트를 입력하면 클래스를 'fab red '으로 변경합니다. 그러나 fab div를 다시 클릭하면 '.fab.red.off'선택기가있는 첫 번째 함수가 실행되고 다른 함수는 트리거되지 않습니다.

아이디어가 있으십니까? 이 코드를 최적화하기위한 제안 사항도 많은 도움이됩니다.

건배

Answer 1

.toggle()을 사용하면 코드를 단순화 할 수 있습니다.이 코드는 표시 될 경우 요소를 숨기고 표시되지 않은 경우 표시합니다.

jQuery(function($) { 
 
    $('.fab.red').click(function() { 
 
    $(this).find('.community_service_icon').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="fab red"> 
 
    <img class="community_service_icon" src="http://placehold.it/50x50"> 
 
    <div class="community_service_text"> 
 
    Charity Run 
 
    <br/>Charity Sale 
 
    <br/>Bake Sale 
 
    <br/>Photo Exhibition 
 
    <br/> 
 
    </div> 
 
</div>

Answer 2

글쎄, 클릭 처리기는 페이지가로드 될 때 한 번 "정적으로"바인딩됩니다. 이 시점에서 .fab.red.off 선택자와 일치하는 요소가 하나 있고 .fab.red.on과 일치하는 요소가 없습니다. 클래스를 변경하면 이벤트 핸들러가 다시 바인딩되지 않습니다.

jQuery .on() (http://api.jquery.com/on/)이 당신이 찾고있는 것일 수 있습니다.

편집 : selector 매개 변수에 유의하십시오.

Answer 3

사용 .on() 기능 docs

jQuery(function($) { 
    $(document).on('click', '.fab.red.off', function() { 
    $(this).removeClass('off').addClass('on'); 
    $(this).children('.community_service_icon').css('display', 'none'); 
    $(this).children('.community_service_text').css('display', 'block'); 
    }); 
}); 

jQuery(function($) { 
    $(document).on('click', '.fab.red.on', function() { 
    $(this).removeClass('on'); 
    $(this).addClass('off'); 
    $(this).children('.community_service_icon').css('display', 'block'); 
    $(this).children('.community_service_text').css('display', 'block'); 
    }); 
}); 

Working Fiddle

Answer 4

$('.fab.red').click(function() { 
 
    $(this).toggleClass('off'); 
 
});

.off img { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="fab red"> 
 
    <img class="community_service_icon" src="http://placehold.it/50x50"> 
 
    <div class="community_service_text">Charity Run 
 
    <br/>Charity Sale 
 
    <br/>Bake Sale 
 
    <br/>Photo Exhibition 
 
    <br/> 
 
    </div> 
 
</div>

을 다음과 같이