我结合了一个滑块和中继器字段。在中继器下,我有2个子字段。一个叫“形象”,另一个叫“标题”
这个滑块有一个叫做“Selected-Item”的类,当图像被选中时会动态地出现。(当这个类在图像上时,图像会改变它的大小)。
我如何定义当类“select-item”在某个图像上时,图像的同一行也会出现“title”?
这是显示图像的代码:
<?php
// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
$title=get_sub_field('image_carousel_discription');
$image = get_sub_field('image_carousel1');
if( !empty($image) ):
// thumbnail
$thumb = $image;
?>
<li id="image11" data-row="<?php echo $i; ?>" > <a
href="#home"><img src="<?php echo $thumb ?>"/></a> </li>
<h3 id="h3-data" data-row="<?php echo $i; ?>"><?php echo $title ?>
</h3>
<?php $i++; ?>
<?php endif; ?>
<?php
endwhile;
endif;
?>
JS-在图像中添加类“select-item”的“carousel on”。
carousel.on('itemSelected.sc', function (evt) {
var image1=
document.getElementById("image11").getAttribute("data-row");
var hdata = document.getElementById("h3-
data").getAttribute("data-row");
var hdata2= document.getElementById("h3-data").innerText;
if(image1==hdata){
document.getElementById("change_h2").innerHTML =hdata2;
}
您可以向图像和标题添加数据属性(f.e.data-row=“
<?php
// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
$title=get_sub_field('image_carousel_discription');
$image = get_sub_field('image_carousel1');
if( !empty($image) ):
// thumbnail
$thumb = $image;
?>
<h1 data-row="<?php echo $i; ?>"><?php echo $title ?></h1>
<li> <a href="#home"><img data-row="<?php echo $i; ?>" src="<?php echo $thumb ?>"/></a> </li>
<?php $i++; ?>
<?php endif; ?>
<?php
endwhile;
endif;
?>