在 JavaScript 中使用 ACF 图像字段

Question

我在以前的网站上使用了一些 JavaScript，并希望重新使用效果 - 将鼠标悬停在各种链接上时，作为 div 上的背景图像的效果会发生变化。但是这一次，我希望图像是 ACF 字段。我已经阅读了 JavaScript API 文档和其他帖子，但我无法让它工作。这就是我所拥有的。我想也许我已经正确获取了该字段，但需要添加在悬停时显示它的动作。左侧的每个表格单元格都是一个 ACF 字段，由标题、描述、链接和图像组成。我希望右侧的大图像在每个单元格悬停时更改为应用于每个单元格的 ACF 图像。我已经包含了我的尝试，尽管我对 php/js 的了解非常有限，所以它可能还没有接近。我也是 ACF 的新手。尝试 1const defaultImg = "/wp-content/default-image.jpg";const newImg = acf.getField('featured_item_one_image');const newImgb = acf.getField('featured_item_two_image');$('.feat-block-1')  .on('mouseover', function() {    $('.main-image').css('background-image', "url(" + newImg + ")");  })$('.feat-block-2')  .on('mouseover', function() {    $('.main-image').css('background-image', "url(" + newImgb + ")");  })尝试 2const newImg = acf.getField('field_5de5a95617941');const newImgb = acf.getField('field_5de5abd20cb3f');$('.feat-block-1')  .on('mouseover', function() {    $('.main-image').css('background-image', "url(" + newImg + ")");  })  $('.feat-block-2')  .on('mouseover', function() {    $('.main-image').css('background-image', "url(" + newImgb + ")");  })而且这在顶部没有任何“常量”值$('.feat-block-1')  .on('mouseover', function() {    $('.main-image').css('background-image', "acf.getField('field_5de5abd20cb3f')");  })  $('.feat-block-2')  .on('mouseover', function() {    $('.main-image').css('background-image', "acf.getField('field_5de5abd20cb3f')");  })

Answer 1

我以前做过这个，但以不同的方式参见下面的代码：

1）我已经使用了 Advance Custom field Repeater plugin pluginlike我已经安装了它并使用它创建自定义字段，请参见此处（https://prnt.sc/q6yohq）

2）从管理员的页面中插入值，例如我想要这个值“stackoverflowpage”页面（我已经制作了模板）所以从管理员我将插入值看到这里（https://prnt.sc/q6yqak）

3）在模板文件（ 。

<?php

    if( have_rows('allfields') ): ?>

    <?php 

    $i=1;

    while( have_rows('allfields') ): the_row(); 

        // vars

        $image = get_sub_field('image');

        $title = get_sub_field('title');

        $content = get_sub_field('description');

        $link = get_sub_field('link');

        ?>

        <table style="border-collapse: collapse; width: 100%">

        <tbody>

        <tr>

        <td >

        <div id="slides_<?php echo $i ?>"  class="divcommonclass">

        <table style="border-collapse: collapse; width: 100%">

        <tbody>

        <tr>

        <td style="width: 100%" class="home-featured-heading">

        <h4>

        <a href="<?php echo $link ?>" target="_blank"><?php echo $title; ?>                                             </a>

                                                                                        </h4>

        </td>

        </tr>

        <tr>

        <td style="width: 100%" class="home-featured-heading">

        <?php echo $content; ?>         

        </td>

        </tr>

        </tbody>

        </table>

        </div>

        <input type="hidden" id="bg-image" value="<?php echo $image['url']; ?>">

        </td>

        </tr>

        </tbody>

        </table>

        <?php $i++; 

         endwhile; ?>

         <?php endif; ?>

      <div class="imageshow"></div>

4) 为我们要显示图像的 div 赋予样式

<style>

  .imageshow {

    background-repeat: no-repeat; 

    background-image: url('http://localhost/stackoverflow/wp-content/uploads/2019/12/person_2.jpg');

    width: 100%;

    height: 100%;

    -webkit-transition: all .5s ease;

  -moz-transition: all .5s ease;

  -ms-transition: all .5s ease;

  -o-transition: all .5s ease;

  transition: all .5s ease;

    }

</style>

5）添加此脚本以在悬停在块上时显示图像

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">

</script>

<script>

$(document).ready(function(){

    $('.divcommonclass')

  .on('mouseover', function() {

  var id =  $(this).attr('id');

    var imagpath = $('#'+id+ "+ #bg-image").val();

    $('.imageshow').css('background-image', "url(" + imagpath + ")");

  });

});

</script>

我没有使用 javascript 来获取 acf javascript 的图像值并在 div 中显示，因为我刚刚使用了 inut 类型 hidden 并在那里添加值，而在 javascript 中我只是通过其 id 获取该图像值

输出：请下载并查看视频（https://drive.google.com/file/d/1xTmSBlxn9NW0Klc4l-uOdA_l---oHuV7/view）