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

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() {&nbsp; const $container = $('.masonry');&nbsp; const testOpen = () => {&nbsp; &nbsp; $container.toggleClass("error",&nbsp; &nbsp; &nbsp; $container.find(".open").length > 0&nbsp; &nbsp; );&nbsp; }&nbsp; $('.masonry-item').on("click", function() {&nbsp; &nbsp; $(this).toggleClass("open");&nbsp; &nbsp; testOpen()&nbsp; });&nbsp; $(document).on("click", function(e) {&nbsp; &nbsp; if (!$container.is(e.target) && $container.has(e.target).length === 0) {&nbsp; &nbsp; &nbsp; $container.find(".open").removeClass("open");&nbsp; &nbsp; &nbsp; testOpen()&nbsp; &nbsp; }&nbsp; });});.error {&nbsp; color: red;&nbsp; border: 1px solid black;&nbsp; display: inline-block;}.open {&nbsp; font-weight: bold;&nbsp; text-decoration: underline;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="masonry">&nbsp; <div class="masonry-item">One</div>&nbsp; <div class="masonry-item">Two</div>&nbsp; <div class="masonry-item">Three</div>&nbsp; <div class="masonry-item">Four</div></div>outside

Answer 2

因为从逻辑上讲，如果至少有一项具有.open，您就不必担心其余的.masonry-item。我的猜测是您的代码不适用于类似的情况['','open','']。即使在迭代第二次设置了“不透明度”类，迭代 3 也会删除该类。$('.masonry-item').each(function() {&nbsp; &nbsp; &nbsp; if ($(this).has('.open')) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().addClass('opacity');&nbsp; &nbsp; &nbsp; &nbsp; return false; // breaks&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().removeClass('opacity');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });

Answer 3

而不是循环外部类的所有子级，检查 paren 是否有类打开的子级if($('.masonry').find('.open').length !== 0){&nbsp; &nbsp; &nbsp; $('.masonry').addClass('opacity');}else{&nbsp;$('.masonry').removeClass('opacity');}

Answer 4

您当前方法的问题是，假设您有 3 个项目，第二个项目具有“开放”类；您的脚本将逐个测试每个项目，然后关闭、打开、然后再次关闭父级的课程。仅当您的最后一个项目具有所需的类时，此脚本才会起作用，因为那时它不会被覆盖。您需要检查该类中的任何位置是否至少有一项。如果是，则打开家长的班级。您可以使用 find() 来完成此操作，这比迭代每个项目要少得多：const $container = $(".masonry");const hasOpenItem = !!$container.find(".masonry-item.open");$container[ hasOpenItem ? "addClass" : "removeClass" ]('opacity');