简体   繁体   中英

Javascript seems not to be working on mobile

I have a text toggle option on my (WordPress) website:

If you click on the red "info" link on the right the text under it opens. The problem is that it doesn't seem to work on mobile (iPhone 4). See the screenshot attached. It seems to me the javascript is not loading at all or just not working?

html link:

<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 code:

<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>

手机网站

Replace "[...divs]" on "Array.from(divs)"

And do it for all other instances of [...{a}].

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM