使用 OOP 切换 3+ 个元素-解网

问：

请看我的 Codepen（我在起点的地方留下了一张纸条）：

我已经能够以一种非常手动的方式实现我喜欢的东西。基本上，我希望徽章遵循与评论相同的行为，例如：-

已选择 Delivery-badge - 具有活动类

退货徽章和调整徽章 - 删除活动类

选择退货后，投放和调整将删除活动类别等。（本质上是这种行为，但更干净 - https://gyazo.com/e31ffc01e0e4be0ceecc3b46fd89c7e7 )

不幸的是，我似乎无法使用 OOP 获得这种行为：/..我觉得如果可能的话，它会更干净。对不起我的菜鸟，谢谢你的看！

<section class="review-block">
  <ul class="badges">
    <li><div class="delivery-badge badge">
      <i class="fa-solid fa-truck"></i>delivery</div></li>
    <li><div class="returns-badge badge">
      <i class="fa-solid fa-arrow-rotate-left"></i>returns</div>     </li>
    <li><div class="adjustments-badge badge">
      <i class="fa-solid fa-ring"></i>adjust</div>
     </li>
  </ul>

  <ul class="reviews">
    <li class="review">Review 1</li>
    <li class="review delivery">Review 2 - delivery</li>
    <li class="review delivery">Review 3 - delivery</li>
    <li class="review returns">Review 4 - returns</li>
    <li class="review adjustments">Review 5 - adjustments</li>
    <li class="review returns">Review 6 - returns</li>
    <li class="review adjustments">Review 7 - adjustments</li>
    <li class="review adjustments">Review 8 - adjustments</li>
    <li class="review">Review 9</li>
  </ul>

</section>

$(".badge").each(function () {
    $(this).on('click', function () {
        var classList = $(this).attr("class");
        const classIdentifier = classList.split('-')[0]
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(".review").each(function () {
                if (!$(this).hasClass(classIdentifier)) {
                    $(this).fadeIn(200);
                }
            });
        } else {
          
  // Can only do this manually, am a little stuck and seems like a borky/old school way :(, feel free to help here and thank you !! >
          if($(this).hasClass('returns-badge'))  
          {           
            $('.returns-badge').addClass('active'),
            $('.delivery-badge').removeClass('active'),
            $('.adjustments-badge').removeClass('active');
          } else if($(this).hasClass('delivery-badge'))  
          {
            $(this).addClass('active'),
            $('.returns-badge').removeClass('active'),
            $('.adjustments-badge').removeClass('active');
          } else if($(this).hasClass('adjustments-badge'))  
          {
            $(this).addClass('active'),
            $('.returns-badge').removeClass('active'),
            $('.delivery-badge').removeClass('active');
          }         
// End of bork
            $(".review").each(function () {
                $(this).fadeOut(200);
                if ($(this).hasClass(classIdentifier)) {
                    $(this).fadeIn(200);
                }


            });
        };
    });
});

jQuery 对象选项卡此 CodePen

答：

0赞 Carsten Løvbo Andersen 12/9/2022 #1

您可以使用一种模式，将其与单击的对象的类相匹配。然后全部隐藏，只显示与你找到的模式相关的这些。.review

 const pattern = /(\w*-badge\w*)/gi;
 const result = ([...$(this).attr("class").match(pattern)] || [""])[0].replace("-badge","");
  
 $(".reviews .review").removeClass("active")
 $(".reviews .review."+result).addClass("active")

演示

$(".badge").each(function() {
  $(this).on('click', function() {
    var classList = $(this).attr("class");
    const classIdentifier = classList.split('-')[0]
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(".review").each(function() {
        if (!$(this).hasClass(classIdentifier)) {
          $(this).fadeIn(200);
        }
      });
    } else {
      
     const pattern = /(\w*-badge\w*)/gi;
     const result = ([...$(this).attr("class").match(pattern)] || [""])[0].replace("-badge","");
      
      $(".reviews .review").removeClass("active")
      $(".reviews .review."+result).addClass("active")
      $(this).data('clicked', true);
      $(".review").each(function() {
        $(this).fadeOut(200);
        if ($(this).hasClass(classIdentifier)) {
          $(this).fadeIn(200);
        }
      });
    };
  });
});

body {
     font-family: calibri;
     padding: 2rem;
}
 body .review-block {
     width: 390px;
     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
     margin: auto;
     border: 1px solid linen;
     text-align: center;
}
 body .review-block .badges {
     padding-inline-start: 0;
}
 body .review-block .badges > li {
     display: inline-block;
}
 body .review-block .badges .active {
     background-color: linen !important;
}
 body .review-block .badges .delivery-badge, body .review-block .badges .returns-badge, body .review-block .badges .adjustments-badge {
     cursor: pointer;
     height: 50px;
     width: 50px;
     background-color: peachpuff;
     margin: 1rem;
     border-radius: 100px;
     color: palevioletred;
     padding: 1rem;
}
 body .review-block .reviews {
     background-color: linen;
     display: flex;
     flex-direction: column;
     padding-inline-start: 0;
     margin-bottom: 0;
}
 body .review-block .reviews li {
     list-style: none;
     border-top: 1px solid linen;
     padding: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <section class="review-block">
    <ul class="badges">
      <li>
        <div class="delivery-badge badge">
          <i class="fa-solid fa-truck"></i>delivery</div>
      </li>
      <li>
        <div class="returns-badge badge">
          <i class="fa-solid fa-arrow-rotate-left"></i>returns</div>
      </li>
      <li>
        <div class="adjustments-badge badge">
          <i class="fa-solid fa-ring"></i>adjust</div>
      </li>
    </ul>

    <ul class="reviews">
      <li class="review">Review 1</li>
      <li class="review delivery">Review 2 - delivery</li>
      <li class="review delivery">Review 3 - delivery</li>
      <li class="review returns">Review 4 - returns</li>
      <li class="review adjustments">Review 5 - adjustments</li>
      <li class="review returns">Review 6 - returns</li>
      <li class="review adjustments">Review 7 - adjustments</li>
      <li class="review adjustments">Review 8 - adjustments</li>
      <li class="review">Review 9</li>
    </ul>

  </section>

</body>

上一个：使用 $this 关键字使用 jquery 在 onChange 上添加/删除类

下一个：Jquery “this” 关键字返回整个窗口 [重复]

使用 OOP 切换 3+ 个元素

toggling 3+ elements using OOP

评论