Почему не работает onclick js в Apple устройствах?

Question

[Валентин]

HTML код (здесь использую плагин CFS, данные берутся с админки)

<div class="faq-box">
        <div class="column">

            <?php
            $faqQuestAnsw = CFS()->get('faq-left');
            $count = 1;
            foreach ($faqQuestAnsw as $question) {
            ?>

                <div class="question-answer">
                    <div class="question question-<?php echo $count; ?>" onclick="">
                        <span><?php echo $question['faq-left-question']; ?></span>
                        <div class="plus-minus">
                            <div class="line-horizontal"></div>
                            <div class="line-vertical line-vertical-<?php echo $count; ?>"></div>
                        </div>
                    </div>
                    <div class="answer answer-<?php echo $count; ?>"><?php echo $question['faq-left-answer']; ?></div>
                </div>

            <?php $count = $count + 1;
            } ?>


        </div>
        <div class="column">

            <?php
            $faqQuestAnsw = CFS()->get('faq-right');
            $count = 6;
            foreach ($faqQuestAnsw as $question) {
            ?>

                <div class="question-answer">
                    <div class="question question-<?php echo $count; ?>" onclick="">
                        <span><?php echo $question['faq-right-question']; ?></span>
                        <div class="plus-minus">
                            <div class="line-horizontal"></div>
                            <div class="line-vertical line-vertical-<?php echo $count; ?>"></div>
                        </div>
                    </div>
                    <div class="answer answer-<?php echo $count; ?>"><?php echo $question['faq-right-answer']; ?></div>
                </div>

            <?php $count = $count + 1;
            } ?>


        </div>
    </div>

CSS:

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor:pointer;
}

JS (извините за длинный код, но по сути все десять блоков повторяются, в JS новичок, если кто знает как можно сократить код, подскажите пож):

/* ===================================1============================================= */
if (document.querySelector('.answer-1')?.innerHTML) {
  let descrheight = document.querySelector('.answer-1').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-1').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-1').scrollHeight;
      document.querySelector('.answer-1').classList.remove('answer-active-1');
      document.querySelector('.line-vertical-1').classList.remove('line-vertical-deactive-1');
    }
    else {
      document.querySelector('.answer-1').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-1').classList.toggle('answer-active-1');
      document.querySelector('.line-vertical-1').classList.toggle('line-vertical-deactive-1');
      descrheight = 0;
    }
return false;
  }
  document.querySelector('.question-1').addEventListener("click", openAnswer);
}
/* ===================================2============================================= */
if (document.querySelector('.answer-2')?.innerHTML) {
  let descrheight = document.querySelector('.answer-2').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-2').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-2').scrollHeight;
      document.querySelector('.answer-2').classList.remove('answer-active-2');
      document.querySelector('.line-vertical-2').classList.remove('line-vertical-deactive-2');
    }
    else {
      document.querySelector('.answer-2').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-2').classList.toggle('answer-active-2');
      document.querySelector('.line-vertical-2').classList.toggle('line-vertical-deactive-2');
      descrheight = 0;
    }

  }
  document.querySelector('.question-2').addEventListener("click", openAnswer);
}
/* ===================================3============================================= */
if (document.querySelector('.answer-3')?.innerHTML) {
  let descrheight = document.querySelector('.answer-3').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-3').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-3').scrollHeight;
      document.querySelector('.answer-3').classList.remove('answer-active-3');
      document.querySelector('.line-vertical-3').classList.remove('line-vertical-deactive-3');
    }
    else {
      document.querySelector('.answer-3').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-3').classList.toggle('answer-active-3');
      document.querySelector('.line-vertical-3').classList.toggle('line-vertical-deactive-3');
      descrheight = 0;
    }

  }
  document.querySelector('.question-3').addEventListener("click", openAnswer);
}
/* ===================================4============================================= */
if (document.querySelector('.answer-4')?.innerHTML) {
  let descrheight = document.querySelector('.answer-4').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-4').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-4').scrollHeight;
      document.querySelector('.answer-4').classList.remove('answer-active-4');
      document.querySelector('.line-vertical-4').classList.remove('line-vertical-deactive-4');
    }
    else {
      document.querySelector('.answer-4').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-4').classList.toggle('answer-active-4');
      document.querySelector('.line-vertical-4').classList.toggle('line-vertical-deactive-4');
      descrheight = 0;
    }

  }
  document.querySelector('.question-4').addEventListener("click", openAnswer);
}
/* ===================================5============================================= */
if (document.querySelector('.answer-5')?.innerHTML) {
  let descrheight = document.querySelector('.answer-5').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-5').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-5').scrollHeight;
      document.querySelector('.answer-5').classList.remove('answer-active-5');
      document.querySelector('.line-vertical-5').classList.remove('line-vertical-deactive-5');
    }
    else {
      document.querySelector('.answer-5').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-5').classList.toggle('answer-active-5');
      document.querySelector('.line-vertical-5').classList.toggle('line-vertical-deactive-5');
      descrheight = 0;
    }

  }
  document.querySelector('.question-5').addEventListener("click", openAnswer);
}
/* ===================================6============================================= */
if (document.querySelector('.answer-6')?.innerHTML) {
  let descrheight = document.querySelector('.answer-6').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-6').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-6').scrollHeight;
      document.querySelector('.answer-6').classList.remove('answer-active-6');
      document.querySelector('.line-vertical-6').classList.remove('line-vertical-deactive-6');
    }
    else {
      document.querySelector('.answer-6').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-6').classList.toggle('answer-active-6');
      document.querySelector('.line-vertical-6').classList.toggle('line-vertical-deactive-6');
      descrheight = 0;
    }

  }
  document.querySelector('.question-6').addEventListener("click", openAnswer);
}

Проблема в том, что только на Apple устройствах не работает onclick, по нажатию на елемент question-1,2,3...На остальных устройствах всё корректно работает. На айфоне также установлен хром и тоже не работает, т.е. проблема не в Сафари. Хотя онклик на бургер-меню и на поиске на этом же сайте работает. Подскажите, пожалуйста, где копать?

Comments

[imko]

на яблочках все браузеры это сафари

[Валентин]

imko, Это встроенный браузер, но можно установить и хром, например...

[luxurypluxury]

Советую вынести функцию openAnswer, передать ей пропсы и просто вызывать в нужных участках кода с данными пропсами.

[Anonymous]

Валентин, нет смысла устанавливать сторонний браузер на айфон. Сейчас еврокомиссия обязала Apple, чтобы они разрешили сторонние веб-движки. То есть - устанавливать сторонний браузер на iPhone практически не было смысла, так как они все работают на одном и том же веб-движке. Но скоро все это поменяется, Apple добавит возможность сторонних веб-движков и появятся другие. К этому уже готовятся Гугл и Мозилла.

[imko]

Валентин, он будет на движке сафари все равно

[Валентин]

luxurypluxury, Можно по подробней? Куда вынести и что такое пропсы?

[Anonymous]

Evgenii, тогда этой информации не было. А так да, к сожалению.

[Anonymous]

Evgenii, тогда были предположения, что это будет распространяться на другие страны, кроме европейских. Но сейчас уже четкая информация о том, что это будет только в Европе.

Answer 1

[DeskundigeICT]

Проблема, вероятно, связана с тем, что на Apple устройствах может быть особенность в обработке событий. Ваш код JS имеет несколько проблем:

1. Вы используете одну и ту же функцию `openAnswer` для всех блоков, что может привести к конфликтам и непредсказуемому поведению.

2. Используете одинаковые идентификаторы (например, `line-vertical-1`, `line-vertical-2`, и т.д.) для разных элементов, что также может вызвать конфликты.

3. В функции `openAnswer` переменная `descrheight` объявляется внутри функции, что делает ее недоступной в других функциях. Это также может вызвать ошибки.

Для решения проблемы и упрощения кода, вы можете использовать делегирование событий и более универсальный подход. Вот пример, как можно переписать ваш код:

document.addEventListener("DOMContentLoaded", function () {
// Найти все элементы с классом 'question'
const questions = document.querySelectorAll('.question');

// Добавить обработчик события для каждого элемента
questions.forEach(function (question, index) {
question.addEventListener("click", function () {
toggleAnswer(index + 1);
});
});

function toggleAnswer(questionNumber) {
const answerSelector = `.answer-${questionNumber}`;
const lineVerticalSelector = `.line-vertical-${questionNumber}`;

const answer = document.querySelector(answerSelector);
const lineVertical = document.querySelector(lineVerticalSelector);

if (answer && lineVertical) {
const descrheight = answer.scrollHeight + 20;

if (descrheight === 0) {
answer.style.maxHeight = '0px';
answer.classList.remove(`answer-active-${questionNumber}`);
lineVertical.classList.remove(`line-vertical-deactive-${questionNumber}`);
} else {
answer.style.maxHeight = descrheight + 'px';
answer.classList.toggle(`answer-active-${questionNumber}`);
lineVertical.classList.toggle(`line-vertical-deactive-${questionNumber}`);
}
}
}
});

Этот код добавляет один обработчик события для всех элементов вопросов и использует функцию `toggleAnswer`, чтобы управлять открытием и закрытием ответов. Это делает код более модульным и уменьшает повторение. Пожалуйста, попробуйте этот подход и посмотрите, поможет ли это решить проблему на устройствах Apple.