javascript - 仅当 child 有事件类(class)时才将类(class)添加到 parent

Question

我有一个砌体，有时砌体项目有“开放”类。我想添加到砌体类不透明度，只有当一些 mansory-item 打开时。如果 mansory-item 的 child 没有公开课，那么 mansory 应该有 class opacity。If 语句仅在第一部分起作用，但我不知道如何解决它。我编辑并更新了。

$("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>

Answer 1

在你的代码中，如果其中一个有一个类或没有，父类将被设置——你想使用 .some 或类似的

单击 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