자식에 활성 클래스가있는 경우에만 부모에 클래스 추가

호세

나는 벽돌을 가지고 있으며 때로는 벽돌 항목에 'open'클래스가 있습니다. 일부 mansory-item이 열려있을 때만 벽돌 클래스의 불투명도를 추가하고 싶습니다. mansory-item 자식이 오픈 클래스가 없다면 mansory는 클래스 불투명도를 가져야합니다. If statment는 첫 번째 부분 만 작동하지만 해결 방법을 모르겠습니다. 편집하고 업데이트했습니다.

$("masonry-item .bottom-line").click(function () {
    $('masonry-item.open').not($(this).parent()).removeClass('open');
    $(this).parent().toggleClass('open');
    $('masonry-item').each(
      function(){
          if ($(this).has('.open')){
            $(this).parent().addClass('error');
              } else {
            $(this).parent().removeClass('error');
          }
      }); 
      
  });



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="masonry">
      <div class="masonry-item"></div>
      <div class="masonry-item"></div>
    </div>
mplungjan

코드에서 그들 중 하나에 클래스 중 하나가 있거나없는 경우 부모가 설정됩니다-.some 또는 유사한 것을 사용하려는 경우

div를 클릭하면 div가 열리고 컨테이너가 클래스를 변경해야하는지 테스트합니다.

외부를 클릭하면 열린 수업이 제거됩니다.

$(function() {
  const $container = $('.masonry');
  const testOpen = () => {
    $container.toggleClass("error",
      $container.find(".open").length > 0
    );
  }
  $('.masonry-item').on("click", function() {
    $(this).toggleClass("open");
    testOpen()
  });

  $(document).on("click", function(e) {
    if (!$container.is(e.target) && $container.has(e.target).length === 0) {
      $container.find(".open").removeClass("open");
      testOpen()
    }
  });
});
.error {
  color: red;
  border: 1px solid black;
  display: inline-block;
}

.open {
  font-weight: bold;
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="masonry">
  <div class="masonry-item">One</div>
  <div class="masonry-item">Two</div>
  <div class="masonry-item">Three</div>
  <div class="masonry-item">Four</div>
</div>

outside

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

PHP 메인 메뉴-자식이 보이는 경우 부모에 활성 클래스 추가

분류에서Dev

모든 자식에게 클래스가있는 경우 부모에 클래스 추가

분류에서Dev

href에 활성 클래스 추가

분류에서Dev

특정 자식이있는 부모에 클래스 추가

분류에서Dev

내부 앵커가있는 활성 메뉴 항목에 클래스 추가

분류에서Dev

Jquery는 모든 div에 활성 클래스를 추가하지만 활성 클래스 만 원합니다.

분류에서Dev

jQuery는 모든 양식 필드에 양식 제출 전에 클래스가있는 경우에만 제출 단추를 활성화합니다.

분류에서Dev

자녀에게 특정 클래스가있는 경우 부모에 클래스를 추가하는 방법

분류에서Dev

링크를 클릭하면 부모 목록에 활성 클래스 추가

분류에서Dev

자녀에게 활성 클래스가있는 경우 앵커 태그 앞에 클래스를 추가합니다.

분류에서Dev

AngularJS-클릭 후 자신에게 활성 클래스 추가

분류에서Dev

부모 클래스에서 자식 클래스 속성 가져 오기

분류에서Dev

하위 메뉴가 활성화되면 부모 li에 클래스 추가

분류에서Dev

하위 클래스가있는 경우 상위 div에 클래스 추가

분류에서Dev

jQuery-요소에 클래스가있는 경우 클래스 추가

분류에서Dev

특정 요소가있는 경우에만 동적으로 생성 된 div에 클래스 추가-Slick Slider

분류에서Dev

기존 클래스가있는 요소에 클래스 추가

분류에서Dev

텍스트가있는 경우 축에 클래스 추가

분류에서Dev

탭 li에 활성 클래스가 있는지 확인

분류에서Dev

다른 클래스가없는 경우에만 클래스 추가

분류에서Dev

자식 클래스에서 함수를 사용하는 추상 함수가있는 C ++ 부모 클래스

분류에서Dev

JQuery에 속성이있는 경우 요소에 클래스 추가

분류에서Dev

센터 리에 활성 클래스를 추가하는 방법

분류에서Dev

양식 클래스에 속성 추가

분류에서Dev

div 내의 모든 범위에 활성 클래스 추가

분류에서Dev

섹션 변경시 메뉴에 활성 클래스 추가

분류에서Dev

부모 클래스에 조건부로 클래스 추가

분류에서Dev

부모 클래스에 조건부로 클래스 추가

분류에서Dev

활성 클래스를 추가하고 마지막 클래스에서 제거하는 Vue 바인드 클릭

Related 관련 기사

  1. 1

    PHP 메인 메뉴-자식이 보이는 경우 부모에 활성 클래스 추가

  2. 2

    모든 자식에게 클래스가있는 경우 부모에 클래스 추가

  3. 3

    href에 활성 클래스 추가

  4. 4

    특정 자식이있는 부모에 클래스 추가

  5. 5

    내부 앵커가있는 활성 메뉴 항목에 클래스 추가

  6. 6

    Jquery는 모든 div에 활성 클래스를 추가하지만 활성 클래스 만 원합니다.

  7. 7

    jQuery는 모든 양식 필드에 양식 제출 전에 클래스가있는 경우에만 제출 단추를 활성화합니다.

  8. 8

    자녀에게 특정 클래스가있는 경우 부모에 클래스를 추가하는 방법

  9. 9

    링크를 클릭하면 부모 목록에 활성 클래스 추가

  10. 10

    자녀에게 활성 클래스가있는 경우 앵커 태그 앞에 클래스를 추가합니다.

  11. 11

    AngularJS-클릭 후 자신에게 활성 클래스 추가

  12. 12

    부모 클래스에서 자식 클래스 속성 가져 오기

  13. 13

    하위 메뉴가 활성화되면 부모 li에 클래스 추가

  14. 14

    하위 클래스가있는 경우 상위 div에 클래스 추가

  15. 15

    jQuery-요소에 클래스가있는 경우 클래스 추가

  16. 16

    특정 요소가있는 경우에만 동적으로 생성 된 div에 클래스 추가-Slick Slider

  17. 17

    기존 클래스가있는 요소에 클래스 추가

  18. 18

    텍스트가있는 경우 축에 클래스 추가

  19. 19

    탭 li에 활성 클래스가 있는지 확인

  20. 20

    다른 클래스가없는 경우에만 클래스 추가

  21. 21

    자식 클래스에서 함수를 사용하는 추상 함수가있는 C ++ 부모 클래스

  22. 22

    JQuery에 속성이있는 경우 요소에 클래스 추가

  23. 23

    센터 리에 활성 클래스를 추가하는 방법

  24. 24

    양식 클래스에 속성 추가

  25. 25

    div 내의 모든 범위에 활성 클래스 추가

  26. 26

    섹션 변경시 메뉴에 활성 클래스 추가

  27. 27

    부모 클래스에 조건부로 클래스 추가

  28. 28

    부모 클래스에 조건부로 클래스 추가

  29. 29

    활성 클래스를 추가하고 마지막 클래스에서 제거하는 Vue 바인드 클릭

뜨겁다태그

보관