如何在单击按钮时显示特定 ACF 行的内容

Question

在此先感谢您的帮助或意见。

我有这段代码获取 ACF Repeater 中的所有行并将它们显示为方块。

<div class="class_wrapper"> 
<?php if( have_rows('classes') ): ?>

<div class="class_blocks">  
  <?php while( have_rows('classes') ) : the_row(); ?>
      <div class="class-callout-block" style="background:url(<?php the_sub_field('class_image'); ?>);">
      <h2><?php the_sub_field('title'); ?></h2>
        </div>

        <?php

    endwhile;

endif;

?>

</div>

我想要实现的是当单击一个块时，下面的 div 填充与单击的块相同的内容。 IE。它调用相同的转发器行。

如果有人能指出正确的方向，我们将不胜感激。

Answer 1

您想将 class-callout-block 的数据复制到另一个 div。通过循环，我猜有很多这样的块和一个输出块。我不确定确切的要求，但我会向您展示如何复制 div 内容并将其放入另一个内容。

检查下面的代码了解如何做并自己实现。下面的代码使用简单的 JavaScript 函数并订阅一个事件侦听器。

//This is for first example. I assign a function click event 
document.getElementById("copy-block").addEventListener("click", function(e) {
  document.getElementById("paste-block").innerHTML = e.target.innerHTML; //this replaces the content.
});


//This is for second example. I assign a function click event for each element of the copy-block-item. same as first one, but in loop.

var lis = Array.from(document.querySelectorAll(".copy-block-item"));
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", function(e) { 
    document.getElementById("paste-block-2").innerHTML = e.target.innerHTML; //this replaces the content.
  });
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid grey;
  float: left;
}

.paste{
  border: 1px solid blue;
}

<div class="box" id="copy-block">This contents needs to be copied to different div</div>
<div class="box paste" id="paste-block"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<p> This is if you have multiple boxes</p>
<div class="box copy-block-item">This contents needs to be copied to different div2</div>
<div class="box copy-block-item">This contents needs to be copied to different div2 2</div>
<div class="box copy-block-item">This contents needs to be copied to different div2 3</div>
<div class="box paste" id="paste-block-2"></div>

请注意：IE 不支持 Array.from()。

如何在单击按钮时显示特定 ACF 行的内容

How to display the content of a specific ACF row on button click

javascript

php

ajax

wordpress

advanced-custom-fields