Javascript 如何在Advance自定义字段中继器的每个循环中显示不同的值

我正在设计wordpress页面，上面有一个文本的图像块。但是这个设计在我的页面中重复了6次，所以我使用了advance custom field repeater来重复该图像块6次。 但现在的问题是，当我将鼠标悬停在每张图像上时，我需要一份新的文本副本。 当我使用Jquery时，由于我的图像块类名相同，所以当我将鼠标悬停在任何框上时，所有框内容都会发生更改。我只想知道内容应该在哪个框上更改

$(".services-block").on({
        mouseenter: function() {
            $(".wrap-content-services").hide();
            $(".overlay-content-services").show();
        },
        mouseleave: function() {
            $(".wrap-content-services").show();`enter code here`
            $(".overlay-content-services").hide();
        }
    });

自定义字段的Html结构

<?php if (have_rows('services_content')): ?>
<div class="row">
    <?php while (have_rows('services_content')): the_row() ?>
        <div class="col-md-6 services-block">
            <?php echo wp_get_attachment_image(get_sub_field('services_image'), 'full'); ?>
            <div class="wrap-content-services">
                <?php the_sub_field('services__overlay_content'); ?>
            </div>
            <div class="overlay-content-services">
                <?php the_sub_field('services__hover_content'); ?>
            </div>
        </div>
    <?php endwhile; ?>
</div>

---

将JQuery更改为：

$(".services-block").on({
    mouseenter: function() {
        $(this).find(".wrap-content-services").hide();
        $(this).find(".overlay-content-services").show();
    },
    mouseleave: function() {
        $(this).find(".wrap-content-services").show();`enter code here`
        $(this).find(".overlay-content-services").hide();
    }
});

---

$（“.wrap内容服务”）.hide（）将隐藏一类.wrap内容服务的所有元素
您的具体问题是什么？如果问题是客户端的，将有助于提供输出html而不是服务器代码。