Show/Hide WP ACF 块中 jQuery 的内容

Question

我正在使用 WordPress 和 ACF 灵活内容，我创建了一个 jquery 函数来显示和隐藏每个灵活内容块的某些元素，但它是整个页面上的 showing/hides 元素部分。

这是我的 ACF 循环代码：

<?php if ( have_rows( 'staff_members' ) ): ?>
    <?php while ( have_rows( 'staff_members' ) ) : the_row(); ?>
        <?php if ( get_row_layout() == 'staff_members' ) : ?>



            <?php if ( have_rows( 'member' ) ) : ?>
                <?php while ( have_rows( 'member' ) ) : the_row(); 
        
        if( get_row_index() % 2 == 0 ){
        
        ?>


<div class="container-fluid staff-member-holder staff-member-holder-bg-left">
  <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-9 ">
      <div class="staff-content-container">
        
      <a class="close-bio">x</a>
      
        <h2><?php the_sub_field( 'name' ); ?></h2>
        <h3><?php the_sub_field( 'position' ); ?></h3>

        <div class="short-contend">
          <p><?php $value = wp_trim_words(get_sub_field('bio'), 274);
echo $value; ?></p>
        </div>

        <div class="additional-content">
          <?php the_sub_field( 'bio' ); ?>
        </div>


        <?php if ( have_rows( 'social_links' ) ) : ?>
          
          <ul>
                        <?php while ( have_rows( 'social_links' ) ) : the_row(); ?>
            
            <li>
              <a href="<?php the_sub_field( 'link' ); ?>">
                <?php the_sub_field( 'link_label' ); ?>
              </a>
            </li>
                        <?php endwhile; ?>
          </ul>
                    <?php else : ?>
                        <?php // No rows found ?>
                    <?php endif; ?>

          <div class="cp-image-with-slideout__panel-learn-more" data-animate="fade" data-direction="right" data-distance="850" data-delay="750" data-speed="1.5" data-animate-processing="true" data-animate-processed="true">
                        <a class="cp-image-with-slideout__panel-learn-more-button">
                            View Profile                        </a>
                    </div>

        </div>

        
      </div>
      <div class="col-sm-12 col-md-12 col-lg-3">
      <?php $image = get_sub_field( 'image' ); ?>
                    <?php if ( $image ) : ?>
                        <img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
                    <?php endif; ?>
      </div>
  </div>
</div>



      <?php } else { ?> 


        <div class="container-fluid staff-member-holder staff-member-holder-bg-right">
  <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-3 p-0 d-flex justify-content-end">


      <a class="close-bio">x</a>

        <?php $image = get_sub_field( 'image' ); ?>
                    <?php if ( $image ) : ?>
                        <img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
                    <?php endif; ?>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-9 staff-member-holder p-0">
        <div class="staff-content-container">
        <h2><?php the_sub_field( 'name' ); ?></h2>
        <h3><?php the_sub_field( 'position' ); ?></h3>

        <div class="additional-content">
          <?php the_sub_field( 'bio' ); ?>
        </div>

        <div class="short-contend">
          <p><?php $value = wp_trim_words(get_sub_field('bio'), 50);
echo $value; ?></p>
        </div>



        <?php if ( have_rows( 'social_links' ) ) : ?>
          
          <ul>
                        <?php while ( have_rows( 'social_links' ) ) : the_row(); ?>
            
            <li>
              <a href="<?php the_sub_field( 'link' ); ?>">
                <?php the_sub_field( 'link_label' ); ?>
              </a>
            </li>
                        <?php endwhile; ?>
          </ul>
                    <?php else : ?>
                        <?php // No rows found ?>
                    <?php endif; ?>

          <div class="cp-image-with-slideout__panel-learn-more" data-animate="fade" data-direction="right" data-distance="850" data-delay="750" data-speed="1.5" data-animate-processing="true" data-animate-processed="true">
                        <a class="cp-image-with-slideout__panel-learn-more-button">
                            View Profile                        </a>
                    </div>

        </div>

        
      </div>
  </div>
</div>
                    
        <?php } ?>
                <?php endwhile; ?>
            <?php else : ?>
                <?php // No rows found ?>
            <?php endif; ?>



        <?php endif; ?>

  
    <?php endwhile; ?>
<?php else: ?>
    <?php // No layouts found ?>
<?php endif; ?>

这是我的脚本，就像我之前提到的那样，它的工作方式与预期的一样，但是我希望它能够为每个部分而不是所有类和 ACF 插槽工作。

jQuery(document).ready(function(){
  // Hide displayed 
  jQuery(".cp-image-with-slideout__panel-learn-more-button").click(function(){
    jQuery(".additional-content, .close-bio").show();
    jQuery(".cp-image-with-slideout__panel-learn-more-button, .short-contend").hide();
  });
  
  // Show hidden 
  jQuery(".close-bio").click(function(){
    jQuery(".additional-content").hide();
    jQuery(".close-bio").hide();
    jQuery(".cp-image-with-slideout__panel-learn-more-button, .short-contend").show();
  });
});

Answer 1

您遇到的问题是您的 jQuery 过于笼统。如果您单击带有 close-bio 作为 class 的任何按钮，然后找到所有 .additional-content 元素并隐藏它们。您现在需要研究使这些事件特定于每个按钮的相关元素的方法。

您可以通过多种不同的方式实现这一目标。我可能会遍历每个 .staff-member-holder 然后创建事件。类似于：

jQuery('.staff-member-holder').each( function () {
  var staffMember = jQuery(this);

  staffMember.find('.close-bio').click( function () {
    staffMember.find('.additional-content').hide();
    staffMember.find('.close-bio').hide();
    staffMember.find('.cp-image-with-slideout__panel-learn-more-button, .short-contend').show();
  });
};

我们现在遍历每个 .staff-member-holder 元素并在该元素中查找每个 .close-bio，当单击该按钮时查找 .additional-content 和 .close-bio 并隐藏它们，并寻找 .learn-more-button 和 .short-contend 并显示它们。

Answer 2

我能够添加这个并且它起作用了：

jQuery(document).ready(function(){
    
    // Hide displayed 
    jQuery(".cp-image-with-slideout__panel-learn-more-button").click(function(){
        var staffContent = jQuery(this).closest('.staff-member-cover');
        jQuery(staffContent).find(".additional-content").show();
        jQuery(staffContent).find(".close-bio").show();
        jQuery(staffContent).find(".cp-image-with-slideout__panel-learn-more-button, .short-contend").hide();
    });

    // Show hidden 
    jQuery(".close-bio").click(function(){
        var staffContent = jQuery(this).closest('.staff-member-cover');
        jQuery(staffContent).find(".additional-content").hide();
        jQuery(staffContent).find(".close-bio").hide();
        jQuery(staffContent).find(".cp-image-with-slideout__panel-learn-more-button, .short-contend").show();
    });
    
});

Show/Hide WP ACF 块中 jQuery 的内容

Show/Hide content with jQuery in WP ACF block

html

javascript

wordpress

jquery

advanced-custom-fields