Bootstrap:控件导致第二个轮播上的JS错误

时间:2018-03-11 05:41:59

标签: twitter-bootstrap bootstrap-carousel

首先,抱歉我的英语不好。非常感谢您提前帮助。

在自定义WordPress上,我有两个bootstrap轮播的代码:

<?php

get_header();

$get_realisations = new WP_Query(array('post_type' => 'realisations', 'posts_per_page' => '-1'));

$array_rea = array();
$array_null = 1;
while($get_realisations->have_posts()) { $get_realisations->the_post();
    $array_rea[$array_null] = get_the_ID();
$array_null++; }

$get_modal = new WP_Query(array('post_type' => 'modeles', 'posts_per_page' => '-1'));


while(have_posts()) : the_post();
    $current_id = get_the_ID();
    $get_title_page = get_the_title();
    $get_project_type = get_field('type_projet_rea');

foreach($array_rea as $k => $v){
    if($current_id == $v){
        $num_project = '0'.$k;
    }
}

$get_project_is_what = get_field('projet_is_rea');

if($get_project_is_what == 'en_cours'){
    $timing = 'Projet en cours';
} else{
    $timing = 'Projet terminé';
}

?>
    <section id="intro-rea-sing">
        <div class="corps">
            <div class="contenu">
                <span class="num-project"><?php echo $num_project; ?></span>
                <h1><?php the_title(); ?></h1>
                <span class="type"><span class="bar"></span>Projet <?php echo $get_project_type; ?></span>
            </div>
            <div id="cc-reaSing-carou" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <?php
                        $list_zero = 0;
                        while(have_rows('liste_slide_carou_single_rea')) : the_row();
                            $get_bg_image_carou = get_sub_field('image_carou_single_rea');
                    ?>
                        <div class="item <?php if($list_zero < 1){echo 'active';}?>" style="background-image: url(<?php echo $get_bg_image_carou['url']; ?>);"></div>
                    <?php $list_zero++; endwhile; ?>
                </div>
                <div class="cc-carou-control">
                    <a class="left carousel-control" href="#cc-reaSing-carou" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#cc-reaSing-carou" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div class="clear"></div>
            <div id="boite-blanc">
                <div id="timing" class="part-boite">
                    <span><?php echo $timing; ?></span>
                </div>
                <div id="emplacement" class="part-boite">
                    <span><?php the_field('emplacement_projet_rea'); ?></span>
                </div>
                <div id="num-model" class="part-boite">
                    <span><span class="get-num-modele"></span> modèles de maisons</span>
                </div>
            </div>
        </div>
    </section>
    <section id="description-rea-single">
        <div class="corps">
            <p><?php the_field('description_rea'); ?></p>
        </div>
    </section>
    <section id="modele">
        <div class="corps">
            <h3 class="tp">Les modèles de maisons <span class="get-num-modele"></span></h3>
        </div>
        <div id="modal-liste">
            <div class="modal-by-modal">
            <?php
                $null = 0;
                while($get_modal->have_posts()) : $get_modal->the_post();
                    $get_project_associe = get_field('projet_associe_modele');

                    $project_asso_array = get_post_meta( get_the_ID(), 'projet_associe_modele', true );

                    $get_bg_url = get_the_post_thumbnail_url();
            ?>
                <div id="<?php echo $post->post_name; ?>" <?php if(in_array($current_id, $project_asso_array)){echo 'class="with-post"';}?> style="background-image: url(<?php echo $get_bg_url; ?>); ">
                    <?php the_title();?>
                </div>
            <?php $null++; endwhile; wp_reset_postdata(); ?>
            </div>
            <?php
                while($get_modal->have_posts()) : $get_modal->the_post();

                $project_associe_array = get_post_meta( get_the_ID(), 'projet_associe_modele', true );
            ?>
                <?php if(in_array($current_id, $project_associe_array)){ ?>
                    <div class="<?php echo $post->post_name; ?> modal-contenu">
                        <div class="corps">
                            <span class="close-modal"></span>
                            <div id="modal-contenu">
                                <div class="recall-page">
                                    <h2 class="tp"><?php echo $get_title_page; ?></h2>
                                </div>
                                <div id="cc-carousel-in-modal" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">

                                    <ol class="carousel-indicators">
                                        <?php
                                            $mod_zero = 0;
                                            while(have_rows('carousel_image_modele')) : the_row();
                                        ?>
                                            <li data-target="#cc-carousel-in-modal" data-slide-to="<?php echo $mod_zero;?>" class="<?php if($mod_zero < 1){echo 'active';}?>"></li>
                                        <?php $mod_zero++; endwhile; ?>
                                    </ol>
                                    <div class="carousel-inner" role="listbox">
                                        <?php
                                            $mod_null = 0;
                                            while(have_rows('carousel_image_modele')) : the_row();

                                            $get_title_img = get_sub_field('titre_descriptif_img_carou_modele');
                                            $image_carou_modele = get_sub_field('image_carou_modele');
                                        ?>
                                            <div class="item <?php if($mod_null < 1){echo 'active';}?>" style="background-image: url(<?php echo $image_carou_modele['url']; ?>);">
                                                <div class="cc-caption">
                                                    <span><?php echo $get_title_img; ?></span>
                                                </div>
                                            </div>
                                        <?php $mod_null++; endwhile; ?>
                                    </div>
                                    <a class="left carousel-control" href="#cc-carousel-in-modal" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#cc-carousel-in-modal" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            <?php endwhile; wp_reset_postdata(); ?>
        </div>
    </section>
    <section id="list-num-rea">
        <div class="corps">
            <ul>
                <?php
                    foreach($array_rea as $k => $v){
                        if($current_id == $v){
                            $class = 'active';
                        } else{
                            $class = '';
                        }
                        echo '<li class="'. $class .'"><a href="'. get_the_permalink($v) .'">0'. $k .'</a></li>';
                    }
                ?>
                <div class="clear"></div>
            </ul>
        </div>
    </section>
<?php endwhile; get_footer(); ?>

在第二个转盘上:

....
<div id="cc-carousel-in-modal" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
....

点击控件时出现这个JS错误:

  

未捕获的TypeError:无法读取未定义的属性'offsetWidth'       在c.slide(bootstrap.min.js:6)       在c.next(bootstrap.min.js:6)       在HTMLDivElement。 (bootstrap.min.js:6)       在Function.each(jquery.min.js:2)       at o.fn.init.each(jquery.min.js:2)       at o.fn.init.b [as carousel](bootstrap.min.js:6)       在HTMLAnchorElement.e(bootstrap.min.js:6)       在HTMLDocument.dispatch(jquery.min.js:3)       在HTMLDocument.r.handle(jquery.min.js:3)

有人会知道为什么?

谢谢!

1 个答案:

答案 0 :(得分:0)

好的,好消息,我解决了我的问题。

我忘了为每个轮播创建不同的ID。因为如果模型与项目相关联,灯箱会有旋转木马。