Javascript 如何在wordpress的选项卡窗格公文包项中添加活动类?

Javascript 如何在wordpress的选项卡窗格公文包项中添加活动类?,javascript,php,wordpress,Javascript,Php,Wordpress,我正在wordpress中制作一个动态投资组合部分。现场链接在这里。 但事实是,当我打开一个公文包项目并从左侧选择项目时,对于第一个公文包图像,它工作,右侧的视图部分。但是对于右侧的第二个和第三个图像视图部分,它不工作。虽然它已经在静态代码中添加了活动类,但它正在为第一个映像工作,为什么我不知道。现在我想在该项的query3循环部分中动态添加活动类。是否可以添加。代码如下 <section> <div class="container gal-cont

我正在wordpress中制作一个动态投资组合部分。现场链接在这里。 但事实是,当我打开一个公文包项目并从左侧选择项目时,对于第一个公文包图像,它工作,右侧的视图部分。但是对于右侧的第二个和第三个图像视图部分,它不工作。虽然它已经在静态代码中添加了活动类,但它正在为第一个映像工作,为什么我不知道。现在我想在该项的query3循环部分中动态添加活动类。是否可以添加。代码如下

 <section>            
<div class="container gal-container">
  <?php
    args = array(
       'post_type' => 'custom_portfolio',
       'posts_per_page' => '-1',
        );
      // the query
        $query = new WP_Query( $args );
         // The Loop   
         if ( $query->have_posts() )  ?>
          <?php while ( $query->have_posts() ) : $query->the_post() ; ?> 
             <!-- Item-->        
              <div class="col-md-4 col-sm-6 co-xs-12 gal-item">
                <div class="box">
                  <a class="trigger" data-iziModal-open="#modal<?php the_ID(); ?>">
           <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>">
                  </a>

                </div>
              </div>

              <!-- Modal-->
              <div id="modal<?php the_ID(); ?>" class="iziModal portfolio" data-izimodal-title="Portfolio Title" data-izimodal-subtitle="Web Design" style="max-width: 1200px important;">

                  <div class="col_one_third p-20">
                      <?php

                        $args2 = array(
                        'post_type' => 'custom_portfolio',
                        'posts_per_page' => '6',
                          );
                         // the query
                         $query2 = new WP_Query( $args2 );
                          // The Loop   
                         if ( $query2->have_posts() )  ?>
                        <?php while ( $query2->have_posts() ) : 
                          $query2->the_post() ; ?>

                     <div class="col_half p-10">
                        <a  href="#<?php the_ID(); ?>b" data-toggle="tab">
                                  <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>" class="portfolio-thumb"/>
                        </a>       
                      </div>

             <?php endwhile; wp_reset_query();  ?>

                        <div class="col_full p-10">
                          <div class="portfolio-links">
         <a href="#" class="btn btn-new" target="_blank">Launch Website</a>    

<a href="#request-quote-form" class="btn btn-danger request-quote-modal">Request a Quote</a>
                       </div>
                      </div> 

                  </div>        

                  <div class="col_two_third col_last">
                      <div class="tab-content">                    
                          <?php

                        $args3 = array(
                        'post_type' => 'custom_portfolio',
                        'posts_per_page' => '-1',
                          );
                         // the query
                         $query3 = new WP_Query( $args3 );
                          // The Loop   
                         if ( $query3->have_posts() )  ?>
                        <?php while ( $query3->have_posts() ) : 
                          $query3->the_post() ; ?>        
                          <div class="tab-pane active" id="<?php the_ID(); ?>b">
                              <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>" class="img-responsive"/>                         
                          </div>
                        <?php endwhile; wp_reset_query();  ?>                            
                        </div>
                        </div>
                        </div>        
                 <!-- Item End-->                
             <?php  endwhile; wp_reset_query();   ?>                  
            </div>        
          </section>Thanks for help....


您必须更改第二个和第三个模态的ID。目前,您在任何地方都有相同的ID,并且第一个ID上的图像也会发生变化。
从打开模式的url中添加另一个ID

它不起作用,因为选项卡的ID相同。ID是唯一的,您应该为每个项目更改它。ID是唯一的,但需要为所选项目添加活动类,请参阅第一个项目,它有活动类,单独用于唯一项目。ID不是唯一的。我看着检查员。你的灯箱在任何时候都会打开所有物品,你必须更改每个物品的ID。对于您的物品,每件物品上都有:25b、23b和21b。当你在第二个或第三个上点击它时,它只对第一个有效,因为第一个ID就在这里,