高级自定义字段 -wordpress+ 转发器

Question

我将滑块与中继器字段结合在一起。 在中继器下，我有 2 个子字段。一个叫“图片”，另一个叫“标题”

this slider has a class called “selected-item” that dynamically appear when an image is selected. （当这个类在图像上时，图像会改变它的大小）。

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

这是显示图像的代码：

    <?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) ):
            // vars

            // thumbnail
            $thumb = $image;

            $i++;

            ?>

   <h1 data-row="< echo $i; >">   <?php echo $title ?>     </h1>
                <li> <a href="#home"><img  data-row="< echo $i; >" src="<?php echo $thumb ?>"/></a> </li>


        <?php endif; ?>



        <?php
    endwhile;
endif;
?>

?>

Answer 1

将标题隐藏在开头，然后在应用所选项目类时显示标题。如果 h1 将始终位于图像标签旁边，则使用 + 选择器。

h1 { display: none; }
.selected-item + h1 { display: block; }

或者您可以使用 jquery 检测类更改事件。

function checkForChanges()
{
    if ($('img').hasClass('selected-item'))
        $('h1').css('display','block');
    else
        setTimeout(checkForChanges, 500);
}

checkForChanges();

$("#click").on('click', function(){
    $('img').addClass("selected-item");
});

    h1 { display: none; } /* Keep the title hidden in the beginning */
     /* Show the title when selected-item class is applied */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://via.placeholder.com/100x100" width="100" height="100">
<h1>title</h1>
<div id="click">click me</div>