【问题标题】：Creating Dynamic Javascript OnClick()创建动态 Javascript OnClick()
【发布时间】：2019-05-15 22:42:05
【问题描述】：

我正在使用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;}

【问题讨论】：

HTML ID 必须是唯一的。 document.getElementById("more") 应始终返回 DOM 中可用的第一个 #more 元素。
getElementById returning value only for first element的可能重复

标签： javascript html advanced-custom-fields

【解决方案1】：

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

现在，每个onClick 都是不同的——它提供了函数应该作用的id，并且这个函数应该总是看到getElementById 返回一个有效对象，因为带有id 的元素应该始终存在。 （如果没有，则生成的 HTML 中有错误，它应该报错。）

【讨论】：

【解决方案2】：

在这段代码中：

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

您正在选择 第一次 id = "dots" 的元素。这始终是您列表中的第一个个人资料。

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 一样，您应该将 id “dots”、“more”和“myBtn”更改为 classes，因为这些元素是重复的。

来自MDN Id attribute page：

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

【讨论】：