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填充的内容与单击的块相同。即。它调用相同的转发器行。

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

Answer 1

您想将class-callout-block的数据复制到另一个div。通过循环，我猜测有很多像这样的块和一个输出块。我不确定具体要求，但我会告诉你如何复制div内容和＆amp;把它放在另一个。

检查以下代码，了解如何操作并自行实施。下面的代码使用简单的JavaScript函数并订阅事件监听器。

＆＃13;

//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.
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: