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

Posted 2023-03-25

【中文标题】高级自定义字段 -wordpress+ 转发器

【英文标题】：advanced custom field -wordpress+ repeater

【发布时间】：2018-05-19 06:20:03

【问题描述】：

我将滑块与中继器字段结合在一起。 在中继器下，我有 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;
?>

?>

【问题讨论】：

我会在您的 jQuery 滑块中包含一个回调来查找“数据行”属性，然后显示相同“数据行”值的 h1。你用什么 jQuery 来滑动你的图片？

你是指哪个版本？

不，抱歉。我应该更清楚。您使用的是哪个滑块？它是插件、jQuery 库还是什么？

这是一个jquery库，叫做jquery sky carousel

答案如下。您应该能够听到对轮播的点击或在滑块的回调上运行函数。

【参考方案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"  >
<h1>title</h1>
<div id="click">click me</div>

【讨论】：

问题是我在标题和img之间没有关系，当“选定项目”类在图像上时，它只在图像上而不在标题上

然后请在 h1 中添加一个类似的类，就像您将它添加到图像中一样。并使用该类隐藏 h1 标签。或者如果 h1 总是在图像标签旁边，那么你可以使用 + 选择器，也可以像 .selected-item + h1 display: block;

问题是当所选项目类中的所有行中出现的所有标题都是活动的，我需要只有来自相同的标题从相同行的所选图像时将显示“选定项目”时出现。类在图片上处于活动状态。