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

Question

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

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