仅当子级有活动课程时才将课程添加到父级

Question

我有一个砌体，有时砌体项目的类别为“开放”。我想添加砖石类不透明度，仅当某些 mansory-item 打开时。如果 mansory-item 的孩子没有公开课，那么 mansory 应该有班级不透明性。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

Answer 2

因为从逻辑上讲，如果至少有一项具有.open，您就不必担心其余的.masonry-item。我的猜测是您的代码不适用于类似的情况['','open','']。即使在迭代第二次设置了“不透明度”类，迭代 3 也会删除该类。

$('.masonry-item').each(function() {

      if ($(this).has('.open')) {

        $(this).parent().addClass('opacity');

        return false; // breaks

      } else {

        $(this).parent().removeClass('opacity');

      }

    });

Answer 3

而不是循环外部类的所有子级，检查 paren 是否有类打开的子级

if($('.masonry').find('.open').length !== 0){

      $('.masonry').addClass('opacity');

}else{

 $('.masonry').removeClass('opacity');

}

Answer 4

您当前方法的问题是，假设您有 3 个项目，第二个项目具有“开放”类；您的脚本将逐个测试每个项目，然后关闭、打开、然后再次关闭父级的课程。仅当您的最后一个项目具有所需的类时，此脚本才会起作用，因为那时它不会被覆盖。

您需要检查该类中的任何位置是否至少有一项。如果是，则打开家长的班级。您可以使用 find() 来完成此操作，这比迭代每个项目要少得多：

const $container = $(".masonry");

const hasOpenItem = !!$container.find(".masonry-item.open");

$container[ hasOpenItem ? "addClass" : "removeClass" ]('opacity');