1

Question

我正在使用ACF repeater创建具有“显示更多信息/隐藏更多信息”功能的用户个人资料。我面临的问题是，当我按下第三个配置文件的“更多”按钮时，它将打开第一个配置文件。如何使此功能动态化，使其仅打开/关闭被单击的配置文件？

<div class="container" style="margin-top: 60px;">
        <?php if(have_rows('profile')): ?>
        <?php while(have_rows('profile')): the_row(); ?>
            <div class="row">
                <div class="col-md-3">
                    <div class="people-img" style="background-image: url('<?php echo the_sub_field("profile_img"); ?>')"></div>
                        </div>
                        <div class="col-md-9">
                        <h4 class="profile-name">
                        <?php the_sub_field('name'); ?>
                        </h4>
                    <p class="profile-job-title semi-bold">
                                <?php the_sub_field('info'); ?>
                    </p>

                    <p><?php the_sub_field('profile_blurb'); ?><span id="dots">...</span><span id="more"><?php the_sub_field('profile_read_all'); ?></span></p>
                    <div class="about-readmore" onclick="myFunction()" id="myBtn">Read more</div>
                  <div class="readmore-border"></div>
                </div>
            </div><!-- end row --> 
    <div class="profile-border"></div>
 <?php
endwhile;
else:
endif;
?>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

#more {display: none;}

Answer 1

在此代码中：

var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");

您正在选择id =“ dots”的元素的 first 出现。这始终是您列表中的第一个配置文件。

1

一种简单的解决方法是：

将<div id="dots">更改为<div class="dots">
使用一个计数参数化此函数，然后查找第n个
使用document.querySelectorAll查找所有“ .dots”元素，然后使用传递给myFunction（index）的索引扩展一个。您可以使用php counter var来跟踪索引。

<div class="about-readmore" onclick="myFunction(index)" id="myBtn">Read more</div>

2

另一种可能更脆弱的方法是在DOM上下查找以找到最接近的配置文件进行扩展：

function myFunction(event) {
  var targetElementParent = event.target.parent;
  var moreText = targetElementParent.querySelector(".more");

  // The rest of the function could remain mostly the same

我说这很脆弱，因为它在很大程度上依赖于DOM的结构，因此，如果更改它，该函数将中断。在这种情况下，就像在＃1中一样，您应该将ids“ dots”，“ more”和“ myBtn”更改为类，因为这些元素是重复的。

来自MDN Id attribute page：

id全局属性定义一个唯一标识符（ID），该标识符在整个文档中必须是唯一的

Answer 2

通常，您希望看到每个文本块（即您所说的每个“配置文件”）在HTML / DOM中都具有唯一的id。举例来说，假设其中一个块的id是“ 123”。然后，将生成 that 配置文件的HTML以包含onclick="myFunction(123)"。

现在，每个onClick是不同的–它提供了该功能应该作用的id，并且该功能应该始终看到getElementById返回有效的对象，因为带有该id的元素应始终存在。 （如果不是，则表明生成的HTML中存在错误，应该投诉）。

创建动态Javascript OnClick（）

2 个答案:

1

2