简化我的 javascript 点击 add/toggle/remove class

Question

我正在处理我网站上的一个部分，我需要在其中切换、添加和删除 class。

我有一些非常有用的东西，但我想知道是否有一个简单的解决方案可以使我的代码比现在更好、更有条理并且更具可读性。

我有 4 个按钮：

.info-button-left-1

.info-button-left-2

.info-button-right-1

.info-button-right-2

这些按钮触发 class 向以下 div 投放广告：

.product-information-block-left-1

.product-information-block-left-2

.product-information-block-right-1

.product-information-block-right-2

这是我的代码：

   <?php
// Create id attribute allowing for custom "anchor" value.
$id = 'info-product-block-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'info-product-block';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}
 ?>


<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> container-fluid">
 <div class="row">
   <div class="container">
     <div class="row product-heading">
       <div class="col">
         <h2><?php echo the_field('product_heading'); ?></h2>
         <?php echo the_field('product_content'); ?>
       </div>
     </div>
     <div class="row product-information">
       <div class="col-left-product">
         <div class="left">
           <div class="product-name"><?php echo the_field('product_name_left'); ?></div>
           <div class="product-year"><?php echo the_field('product_year_left'); ?></div>
           <div class="product-button">
             <?php
             $link = get_field('product_link_left');
             if( $link ):
                 $link_url = $link['url'];
                 $link_title = $link['title'];
                 $link_target = $link['target'] ? $link['target'] : '_self';
                 ?>
                 <a class="buy-button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
             <?php endif; ?>
           </div>
         </div>
         <div class="right">
           <div class="product-image">
             <div class="info-button-left-1"></div>
             <div class="info-button-left-2"></div>
             <?php
             $image = get_field('product_image_left');
             if( !empty( $image ) ): ?>
                 <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
             <?php endif; ?>
           </div>
           <div class="product-information-block-left-1">
             <?php echo the_field('product_content_left'); ?>
           </div>
           <div class="product-information-block-left-2">
             <?php echo the_field('product_content_left'); ?>
           </div>
         </div>
       </div>
       <div class="col-right-product">
         <div class="right">
           <div class="product-image">
             <div class="info-button-right-1"></div>
             <div class="info-button-right-2"></div>
             <?php
             $image_right = get_field('product_image_right');
             if( !empty( $image_right ) ): ?>
                 <img src="<?php echo esc_url($image_right['url']); ?>" alt="<?php echo esc_attr($image_right['alt']); ?>" />
             <?php endif; ?>
           </div>
           <div class="product-information-block-right-1">
             <?php echo the_field('product_content_left'); ?>
           </div>
           <div class="product-information-block-right-2">
             <?php echo the_field('product_content_left'); ?>
           </div>
         </div>
         <div class="left">
           <div class="product-name"><?php echo the_field('product_name_right'); ?></div>
           <div class="product-year"><?php echo the_field('product_year_right'); ?></div>
           <div class="product-button">
             <?php
             $link_right = get_field('product_link_right');
             if( $link_right ):
                 $link_right_url = $link_right['url'];
                 $link_right_title = $link_right['title'];
                 $link_right_target = $link_right['target'] ? $link_right['target'] : '_self';
                 ?>
                 <a class="buy-button" href="<?php echo esc_url( $link_right_url ); ?>" target="<?php echo esc_attr( $link_right_target ); ?>"><?php echo esc_html( $link_right_title ); ?></a>
             <?php endif; ?>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
<script>
$(".col-left-product .info-button-left-1").click(function() {
    $(".product-information-block-left-1").toggleClass("active");
    $(".product-information-block-left-2").removeClass("active");
    $(".product-information-block-right-1").removeClass("active");
    $(".product-information-block-right-2").removeClass("active");
});
$(".col-left-product .info-button-left-2").click(function() {
    $(".product-information-block-left-2").toggleClass("active");
    $(".product-information-block-left-1").removeClass("active");
    $(".product-information-block-right-1").removeClass("active");
    $(".product-information-block-right-2").removeClass("active");
});

$(".col-right-product .info-button-right-1").click(function() {
    $(".product-information-block-right-1").toggleClass("active");
    $(".product-information-block-right-2").removeClass("active");
    $(".product-information-block-left-1").removeClass("active");
    $(".product-information-block-left-2").removeClass("active");
});
$(".col-right-product .info-button-right-2").click(function() {
    $(".product-information-block-right-2").toggleClass("active");
    $(".product-information-block-right-1").removeClass("active");
    $(".product-information-block-left-1").removeClass("active");
    $(".product-information-block-left-2").removeClass("active");
});
</script>
</section>

我每天都在学习越来越多。但我确实认为有更好的方法来做到这一点。有没有人可以给我答案或路径？

提前谢谢你。

Answer 1

在类似的情况下，我将数据属性与通用 class 名称结合使用：

按钮的一般语法：

<div class="info-button" data-place="left" data-targetId="1"></div>

目标div的通用代码：

<div class="product-information-block" data-place="right" data-targetId="1">
    <?php echo the_field('product_content_left'); ?>
</div>

处理所有事件的通用代码：

$(".col-right-product .info-button").click(function() {
    var place=$(this).data("place");
    var targetId=$(this).data("targetId");
    $(".product-information-block").removeClass("active");
    $(".product-information-block[data-place='"+ place +"'][data-targetId='"+ targetId +"']").addClass("active");
});

Answer 2

为了使 JS 更通用，您可以在元素上使用常见的 class 名称。然后你可以使用 DOM 遍历方法将它们相互关联起来，例如 closest() 和 find() 通过匹配索引来定位所需的元素。像这样：

let $productInfoBlocks = $('.product-information-block');

$('.info-button').on('click', e => {
  let $el = $(e.target);
  let $targetInfoBlock = $el.closest('.col').find('.product-information-block').eq($el.index()).toggleClass('active');
  $productInfoBlocks.not($targetInfoBlock).removeClass('active');
});

.active { color: #C00; }

<!-- Note: I reduced the HTML to the relevant elements only -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row product-information">
  <div class="col col-left-product">
    <div class="right">
      <div class="product-image">
        <div class="info-button">info-button-left-1</div>
        <div class="info-button">info-button-left-2</div>
      </div>
      <div class="product-information-block">product-information-block-left-1</div>
      <div class="product-information-block">product-information-block-left-2</div>
    </div>
  </div>
  <div class="col col-right-product">
    <div class="right">
      <div class="product-image">
        <div class="info-button">info-button-right-1</div>
        <div class="info-button">info-button-right-2</div>
      </div>
      <div class="product-information-block">product-information-block-right-1</div>
      <div class="product-information-block">product-information-block-right-2</div>
    </div>
  </div>
</div>

简化我的 javascript 点击 add/toggle/remove class

Simplify my javascript click add/toggle/remove class

javascript

jquery

click