Блог

Главная - Вопросы по программированию - Обнаружение вида вяза, работающего не в WordPress, а в javascript

Обнаружение вида вяза, работающего не в WordPress, а в javascript

#javascript #wordpress

#javascript #wordpress

Вопрос:

Что я пытаюсь сделать

Я пытаюсь увеличить число до определенного состояния при входе в view. Я собираюсь быть с вами полностью прозрачным. У меня почти нет знаний о разработке веб-сайтов, это просто для сайта WordPress, где я не смог найти плагин, чтобы сделать это за меня это дает больше гибкости. Мои знания просто лежат в другом месте. До сих пор я создал код, который активируется, как только он входит в представление, и он также подсчитывается.

Проблема Da

Как вы можете видеть здесь «https://jsfiddle.net/yd81prgq /» это уже работает.Затем я попытался поместить точно такой же код в wordpress для элемента. Теперь я знаю, что его часть активации не работает, поскольку во время тестирования я заставил ее подсчитывать, но только после загрузки страницы.

Код, который я добавляю в WordPress

 <h2 id="(id)">Count to ten when seen</h2>

<script>

var i = 0; 
function increment() {
    if (i<10) {
        i  ;
        document.getElementById('(id)').innerHTML = i;
    }
}
function startcount() {
    setInterval('increment()', 50);
}


var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        startcount();
}, { threshold: [1] });

observer.observe(document.querySelector("#(id)"));


</script>

Заранее спасибо 🙂

Ответ №1:

Вы должны удалить скобки из идентификатора. Глобально идентификатор должен содержать только буквы, цифры, подчеркивание и / или тире.

PS: java — это не javascript 😉

 var i = 0; 
function increment() {
    if (i<10) {
        i  ;
        document.getElementById('id').innerHTML = i;
    }
}
function startcount() {
    setInterval('increment()', 50);
}


var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        startcount();
}, { threshold: [1] });

observer.observe(document.querySelector("#id"));  
 <h2 id="id">Count to ten when seen</h2>

Альтернатива с меньшим количеством кода для того же результата:

 const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));

async function counter() {
  for (let i = 1; i <= 10; i  ) {
    await sleep(50);
    document.getElementById('id').innerHTML = i;
  }
}

counter();  
 <h2 id="id">Count to ten when seen</h2>

Комментарии:

1. Спасибо, java / javascript был просто опечаткой, в которой я виноват. Также спасибо за сокращенную длину кода, хотя это не то, что я искал. Я просто вставлял скобки, чтобы уточнить, что я имел в виду идентификатор, чтобы перейти туда, я, вероятно, должен был сделать лучшую работу по объяснению там. В ссылке fiddlejs я также ввел идентификатор, и он сработал. Моя проблема в том, что он не работает с WordPress

2. О, хорошо, извините, я неправильно понял. Можете ли вы просматривать свою консоль в режиме inscpect (в вашем браузере)? Найдите любую ошибку, связанную с вашим JS, отредактируйте свой первый пост, чтобы добавить его, пожалуйста.

3. Мне очень, очень жаль, что я потратил ваше время впустую. Оказывается, WordPress просто странный и не хотел активироваться до того, как вы от него отскочили. Я просто немного активировал его раньше, так что, когда вы действительно видите его, он запускается. Я очень ценю вашу помощь и дружелюбие. Будьте добры сказать, в каком бы часовом поясе вы ни находились 🙂

4. Ахах, нет проблем, это одно удовольствие 🙂

Ответ №2:

Я нашел проблему. Это увеличивает количество сообщений о моих ошибках до 2/2… Проблема заключалась в том, что, поскольку код проверяет, когда определенный элемент входит в view, wordpress, по-видимому, построен таким образом, что это происходит при выходе из view. Вероятно, это связано с некоторыми визуальными эффектами и кодом, происходящими в фоновом режиме wordpress. Я не знаю, но это была проблема. Спасибо за полученную помощь

Для дальнейшего использования вот рабочий код:

 <h2 id="id" class="class">Make this count to ten</h2>

<script>

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));

async function counter() {
  for (let i = 1; i <= 10; i  ) {
    await sleep(50);
    document.getElementById('id').innerHTML = i;
  }
}


var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        counter();
}, { threshold: [1] });

observer.observe(document.querySelector("#id"));
</script>