轮播控制按钮仅在一页上有效
Posted
技术标签:
【中文标题】轮播控制按钮仅在一页上有效【英文标题】：Carousel control buttons only work on one page 【发布时间】：2021-09-07 08:56:43 【问题描述】：我正在制作一张地图，该地图可以显示每个城市的点击信息。 该信息包含图像滑块轮播（引导程序 5）。 下一个/上一个按钮仅适用于一个城市。 我不确定我是否必须更改我的 javascript 或根本问题是什么？ 我附上了包含 2 个城市详细信息的代码。 （我共有31个城市）
我实际上正在使用 ACF Nested Repeater 开发 WordPress。 我的 WordPress 代码如下所示。
请给我任何建议。 这是我在这里的第一篇文章，希望在这里得到一些帮助。 提前致谢！
<div class="col-12 col-md-4" id="lacartecommunes">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 653.656 932.182">
<defs>
<clipPath id="clip-path">
<path id="Tracé_1" data-name="Tracé 1" d="M653.656,0H0V932.182H653.656" transform="translate(0 0)" fill="none"></path>
</clipPath>
</defs>
<pattern id="diagonalHatch" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="2" y2="4" style="stroke:#B79A20; stroke-width:15"></line>
</pattern>
<path id="poule" data-name="Tracé 175" ></path>
<path id="claveisolles" data-name="Tracé 176"></path>
</svg>
</div>
<div class="col-12 col-md-6" id="infoscommunes">
<div class="row click_pour_info hide">
<div class="col-8 col-md-8" id="text_click">
<h2 data-uw-styling-context="true">Cliquez sur les communes pour en savoir en<strong data-uw-styling-context="true">COR</strong>e plus sur le territoire !</h2>
</div>
</div>
<div id="commune_info_claveisolles" class="row hide">
<h3 class="col-12 col-md-12" style="text-align: left !important" data-uw-styling-context="true">Claveisolles</h3>
<div class="col-12 col-md-6 photo_commune">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class=""></button>
</div>
<div class="carousel-inner map">
<div class="carousel-item map active" style="background-image: url(https://rvcom211b-corouestrhodanien.pf7.wpserveur.net/wp-content/uploads/2021/06/Vue-ST-FORGEUX_2020-09-23_©COR-2-scaled.jpg)">
</div>
<div class="carousel-item map" style="background-image: url(https://rvcom211b-corouestrhodanien.pf7.wpserveur.net/wp-content/uploads/2021/06/Vue-Tarare_2021-06-22_©COR-2-scaled.jpg)">
</div>
</div>
<button class="carousel-control-prev map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden" data-uw-styling-context="true">Précédent</span>
</button>
<button class="carousel-control-next map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden" data-uw-styling-context="true">Suivant</span>
</button>
</div>
</div>
<div class="col-12 col-md-6 descr_commune"> <p></p><p data-uw-styling-context="true"><strong data-uw-styling-context="true">Maire : </strong>Dominique Despras <strong data-uw-styling-context="true">Code Postal : </strong>69870<br>
<strong data-uw-styling-context="true">Superficie : </strong>2833 hectares <strong data-uw-styling-context="true">Altitude : </strong>394 mètres <strong data-uw-styling-context="true">Population : </strong>749 habitants<br>
<strong data-uw-styling-context="true">Horaires d’ouverture de la mairie : </strong><br>
mardi, jeudi, vendredi, samedi de 9h30 à 11h30<br>
mercredi de 17h à 19h</p>
<p data-uw-styling-context="true"><strong data-uw-styling-context="true">Tel. : </strong>04 74 02 06 54 <strong data-uw-styling-context="true">Fax : </strong>04 74 02 01 95<br>
<a href="http://www.ouestrhodanien.fr/#"><strong data-uw-styling-context="true">E-mail : </strong><span class="mel2" data-uw-styling-context="true">mairie@claveisolles.fr</span></a><br>
<a href="http://www.claveisolles.fr" target="_blank" rel="noopener" data-uw-styling-context="true"><strong data-uw-styling-context="true">Site internet : </strong>http://www.claveisolles.fr</a></p>
<p></p></div>
</div>
<div id="commune_info_poule" class="row hide">
<h3 class="col-12 col-md-12" style="text-align: left !important" data-uw-styling-context="true">Poule-les-Echarmeaux</h3>
<div class="col-12 col-md-6 photo_commune">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class=""></button>
</div>
<div class="carousel-inner map">
<div class="carousel-item map active" style="background-image: url(https://rvcom211b-corouestrhodanien.pf7.wpserveur.net/wp-content/uploads/2021/06/IMG_0245-scaled.jpg)">
</div>
<div class="carousel-item map" style="background-image: url(https://rvcom211b-corouestrhodanien.pf7.wpserveur.net/wp-content/uploads/2021/06/Vue-Thizy-Les-Bourgs_2021-04-07_©COR-10-scaled.jpg)">
</div>
</div>
<button class="carousel-control-prev map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden" data-uw-styling-context="true">Précédent</span>
</button>
<button class="carousel-control-next map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden" data-uw-styling-context="true">Suivant</span>
</button>
</div>
</div>
<div class="col-12 col-md-6 descr_commune"> <p></p><p data-uw-styling-context="true"><strong data-uw-styling-context="true">Maire : </strong>Aymeric Champale <strong data-uw-styling-context="true">Code Postal : </strong>69870<br>
<strong data-uw-styling-context="true">Superficie : </strong>3123 hectares <strong data-uw-styling-context="true">Altitude : </strong>450 mètres <strong data-uw-styling-context="true">Population : </strong>1123 habitants</p>
<p data-uw-styling-context="true"><strong data-uw-styling-context="true">Horaires d’ouverture de la mairie : </strong><br>
lundi et vendredi de 14h à 17h<br>
mardi, mercredi, jeudi et samedi de 9h à 12h</p>
<p data-uw-styling-context="true"><strong data-uw-styling-context="true">Tel. : </strong>04 74 03 64 48 <strong data-uw-styling-context="true">Fax : </strong>04 74 03 68 71<br>
<a href="http://www.ouestrhodanien.fr/#"><strong data-uw-styling-context="true">E-mail : </strong><span class="mel2" data-uw-styling-context="true">secretariat@poulelesecharmeaux.fr</span></a><br>
<a href="http://www.poulelesecharmeaux.fr" target="_blank" rel="noopener" data-uw-styling-context="true"><strong data-uw-styling-context="true">Site internet : </strong>http://www.poulelesecharmeaux.fr</a></p>
<p></p></div>
</div>
</div>
</section>
<script>
$("#lacartecommunes").click(function(ev)
var target = $(ev.target);
var targetId = target.attr('id');
if(targetId == 'claveisolles')
$(".click_pour_info").removeClass("show").addClass('hide');
$(".show").removeClass("show").addClass('hide');
$("#commune_info_claveisolles").removeClass('hide').addClass("show");
);
$("#lacartecommunes").click(function(ev)
var target = $(ev.target);
var targetId = target.attr('id');
if(targetId == 'poule')
$(".click_pour_info").removeClass("show").addClass('hide');
$(".show").removeClass("show").addClass('hide');
$("#commune_info_poule").removeClass('hide').addClass("show");
);
</script>
//code wordpress
<section id="carte_communes" class="row justify-content-md-center">
<div class="col-12 col-md-4" id="lacartecommunes">
<?php get_template_part('carte_communes', 'index');?>
</div>
<div class="col-12 col-md-6" id="infoscommunes">
<div class="row info_cor">
<div class="col-12 col-md-6 logo_info_cor">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo_cor_bloc.png" title="COR - Communauté de Communes Ouest Rhodanien" ></div>
<div class="col-12 col-md-6 text_info_cor"><?php the_field('infos_cor', 'option'); ?></div>
</div>
<div class="row click_pour_info">
<div class="col-8 col-md-8" id="text_click">
<h2 >Cliquez sur les communes pour en savoir en<strong>COR</strong>e plus sur le territoire !</h2>
</div>
</div>
<?php while( have_rows('les_communes_cor', 'option') ): the_row();
// vars
$photo = get_sub_field('photo_commune_cor', 'option');
$nom_commune = get_sub_field('nom_commune_cor', 'option');
$slug_commune = get_sub_field('identifiant_commune', 'option');
$descript_commune = get_sub_field('descriptif_commune_cor', 'option');
?>
<div id="commune_info_<?php echo $slug_commune; ?>" class="row " >
<h3 class="col-12 col-md-12" style="text-align: left !important"><?php echo $nom_commune; ?></h3>
<div class="col-12 col-md-6 photo_commune" >
<?php if( have_rows('photo_commune_cor') ):
$i = 1; // Set the increment variable
$nombre = 0;
echo '<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
';
// loop through the rows of data for the tab header
while ( have_rows('photo_commune_cor') ) : the_row();
?>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<?php echo $nombre;?>" class="<?php if($nombre == 0) echo 'active';?>"></button>
<?php $nombre++; // Increment the increment variable
endwhile; //End the loop
wp_reset_postdata();
echo '</div>
<div class="carousel-inner map">';
// loop through the rows of data for the tab header
while ( have_rows('photo_commune_cor') ) : the_row();
$image = get_sub_field('photo_commune_slider');
?>
<div class="carousel-item map <?php if($i == 1) echo 'active';?>" style="background-image: url(<?php echo $image['url']; ?>)">
</div>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
wp_reset_postdata();
echo '
</div>
<button class="carousel-control-prev map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Précédent</span>
</button>
<button class="carousel-control-next map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Suivant</span>
</button>
</div>';
else :
// no rows found
endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<div class="col-12 col-md-6 descr_commune"> <p><?php echo $descript_commune; ?></p></div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php wp_reset_postdata(); ?>
</div>
</section>```
【问题讨论】：
这真的很难诊断，因为它有大量的代码，没有可测试的。我建议制作一个可测试的 sn-p（没有 php）——这很容易。只需在您的实际页面上查看源代码并将呈现的 html 复制到此处的 sn-p 中。包括任何相关的脚本和任何必要的外部脚本标签。使用工具栏中的 sn-p 按钮开始。 【参考方案1】：这是jsfiddle上的代码，点击here！
通常所有的信息都是 display:none; 但我不能让它在 jsfiddle 上工作。
<div id="commune_info_poule" class="row hide">
<h3 class="col-12 col-md-12" style="text-align: left !important" data-uw-styling-context="true">Poule-les-Echarmeaux</h3>
<div class="col-12 col-md-6 photo_commune">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class=""></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true"></button>
</div>
<div class="carousel-inner map ">
<div class="carousel-item map" style="background-image: url(https://rvcom211b-corouestrhodanien.pf7.wpserveur.net/wp-content/uploads/2021/06/TiersLieu_2021-02-25_©COR-17-scaled.jpg)">
</div>
<div class="carousel-item map active" style="background-image: url(https://rvcom211b-corouestrhodanien.pf7.wpserveur.net/wp-content/uploads/2021/06/ECOMUSEE_vue-drone_2020-02-1-scaled.jpg)">
</div>
</div>
<button class="carousel-control-prev map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden" data-uw-styling-context="true">Précédent</span>
</button>
<button class="carousel-control-next map" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden" data-uw-styling-context="true">Suivant</span>
</button>
</div>
</div>
但是您可以看到我有 2 张幻灯片，轮播指示器仅适用于其中一张。
【讨论】：
以上是关于轮播控制按钮仅在一页上有效的主要内容，如果未能解决你的问题，请参考以下文章