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