Question

我将滑块与转发器字段组合在一起。在转发器下我有2个子场。一个称为“图像”，另一个称为“标题”

此滑块有一个名为“selected-item”的类，在选择图像时会动态显示该类。（当这个类在图像上时，图像会改变它的大小。）

如何定义当“选定项目”类在某个图像上时，还会出现图像同一行的“标题”？

这是显示图像的代码：

    <?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-“carousel on”将“selected-item”类添加到图像中。

 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 =“＆lt; echo $ i;＆gt;”）。定义变量$ i = 1;在转发器之前和每次迭代结束时，将$ i值递增1。然后，当所选图像具有“选择项”类时，检查哪个标题具有相同的数据行属性。

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

高级自定义字段+转发器+滑块

1 个答案: