創建動態Javascript OnClick（）

Question

我正在使用ACF轉發器來創建具有“閱讀更多/閱讀較少”功能的用戶配置文件，該功能可以顯示和隱藏文本。 我面臨的問題是，當我按下第三個配置文件的“更多”按鈕時，它將打開第一個配置文件。 如何使此功能動態化，使其僅打開/關閉被單擊的配置文件？

<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”的元素的第一次出現。 這始終是您列表中的第一個配置文件。

1

解決此問題的一種簡單方法是：

1. 將<div id="dots">更改為<div class="dots">
2. 用一個計數參數化此函數，然后查找第n次出現

3. 使用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”更改為類，因為這些元素是重復的。

從MDN ID屬性頁面 ：

id全局屬性定義一個唯一標識符（ID），該標識符在整個文檔中必須是唯一的

Answer 2

通常，您希望看到每個文本塊（如您所說的每個“配置文件”）在HTML / DOM中都有唯一的id 。 舉例來說，假設其中一個塊的id為“ 123”。 然后將生成該配置文件的HTML以包含onclick="myFunction(123)" 。

現在，每個onClick都是不同的–它提供了該函數應該作用於其上的id ，並且此函數應始終看到getElementById返回有效對象，因為應始終存在具有該id的元素。 （如果沒有，則說明生成的HTML中存在錯誤，應該投訴。）