提问者:小点点

高级自定义域+中继器+滑块


我结合了一个滑块和中继器字段。在中继器下,我有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;     
  } 

共1个答案

匿名用户

您可以向图像和标题添加数据属性(f.e.data-row=“”)。定义变量$i=1;在repeater之前和每次迭代结束时,将$i值增加1。然后,当所选图像具有“select-item”类时,检查哪个标题具有相同的数据行Atributte。

<?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;
?>