Создание динамического Javascript OnClick () - PullRequest
Новая
       12

Создание динамического Javascript OnClick ()

0 голосов
/ 14 декабря 2018

Я использую повторитель 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;}

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

В этом коде: 

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 (индекс).Вы можете использовать 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, вы должны изменить идентификаторы «dots», «more» и «myBtn» на классы, потому что эти элементы повторяются.

From Страница атрибута MDN Id :

Глобальный атрибут id определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе

0 голосов
/ 14 декабря 2018

Обычно вы ожидаете увидеть, что каждый блок текста - каждый «профиль», как вы их называете - будет иметь уникальный id в HTML / DOM.Скажем для примера, что id одного из блоков - «123.»HTML-код для , который затем будет сгенерирован профиль , будет содержать onclick="myFunction(123)".

Теперь каждый onClick отличается - он предоставляет id, на который должна воздействовать функцияи эта функция должна всегда видеть, что getElementById возвращает действительный объект, потому что элемент с этим id должен всегда присутствовать. (Если это не так, в сгенерированном HTML есть ошибка, и он должен жаловаться.)

...