Javascript не работает на мобильных устройствах - PullRequest
0 голосов
/ 28 августа 2018

У меня есть опция переключения текста на моем (WordPress) сайте:

Если вы нажмете на красную ссылку «информация» справа, откроется текст под ней. Проблема в том, что он не работает на мобильных устройствах (iPhone 4). Смотрите скриншот прилагается. Мне кажется, JavaScript вообще не загружается или просто не работает?

html ссылка:

<div id="<?php the_ID(); ?>" class="projectTitel">
    <?php the_title( sprintf( '<h2 class="entry-title"><button rel="bookmark" class="show">', esc_url( get_permalink() ) ), '<div class="info">Info &#8595;</div><div class="close_info">X</div></button></h2>' ); ?>
</div>

код JavaScript:

<script type="text/javascript">
var divs = document.getElementsByClassName("projectTitel");

[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));

// by default, all Inhoud divs are hidden
hideElements("Inhoud");
hideElements("close_info");
jQuery('.info').show();

function handler(event) {
    // get the clicked project's index :
    var projectIndex = getClickedProjectIndex(event);

    // toggle the right Inhoud div :
    toggleDiv(document.getElementsByClassName("Inhoud")[projectIndex]);
        toggleDiv(document.getElementsByClassName("close_info")[projectIndex]);
        toggleDiv(document.getElementsByClassName("info")[projectIndex]);
}

// hide all elements that have the provided class name
function hideElements(className) {
    var elements = document.getElementsByClassName(className);

    [...elements].forEach(element => element.style.display = "none");
}

function getClickedProjectIndex(event) {
    var elements = document.getElementsByClassName("projectTitel");
    var projectIndex = 0;

    [...elements].forEach((element, index) => {
        if (element.id == event.currentTarget.id) {
            projectIndex = index;
        }
    });

    return projectIndex;
}

function toggleDiv(element) {

   if (element.style.display === 'none') {
      element.style.display = 'block';
   } else {
      element.style.display = 'none';
   }
}
</script>

website on mobile

1 Ответ

0 голосов
/ 04 сентября 2018

Заменить "[... divs]" на "Array.from (divs)"

И сделайте это для всех остальных случаев [... {a}].

...