简化我的 javascript 单击添加/切换/删除类

Question

I am working on a section on my website where I need to toggle, add, and remove a class.

I have something that works really good but I was wondering if there is a simple solution to make my code better, organized, and much more readable than how it is now.

I have 4 buttons:

.info-button-left-1

.info-button-left-2

.info-button-right-1

.info-button-right-2

These buttons trigger a class to ad to the following divs:

.product-information-block-left-1

.product-information-block-left-2

.product-information-block-right-1

.product-information-block-right-2

And this is my code:

   <?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>

I am learning more and more every day. but I do think that there is a better way to do this. Is there anyone who can give me an answer or a path to follow?

Thank you in advance.

Answer 1

To make the JS more generic you can use common class names on the elements. Then you can relate them to each other by using DOM traversal methods, such as closest() and find() to target the required element by matching indexes. Something like this:

 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>

Answer 2

In similar case I used data attribute in combination with a general class name:

The general syntax for buttons:

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

The general code for target divs:

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

The general code to handle all occurances:

$(".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");
});