Ответы пользователя по тегу JavaScript
  • Как задать плавное появление блока?

    irtek
    @irtek
    Wordpress-addicted
    Добавить

    visibility: hidden / visibility: visible

    И еще можно использовать свойство pointer-events: none;

    Оно отменяет "рабочесть" блока (на него нажать, выделить и т.п.)
    Ответ написан
    Комментировать
  • Почему у меня получается объект с неверными ключами?

    irtek
    @irtek
    Wordpress-addicted
    Вам нужно обработать получаемый массив от serializeArray

    const detailsData = $('form').serializeArray()
    
    let details = {};
    for (let i = 0; i < detailsData.length; i++) {
        details[detailsData[i]['name']] = detailsData[i]['value'];
    }
    
    var formData = {
        'details': details,
        'items': JSON.parse(Cookies.get('basket')),
        'visitor': <?php echo (!empty($visitor)) ? json_encode($visitor) : null; ?>
    };
    
    console.log(formData);
    Ответ написан
    1 комментарий
  • Ошибка в gulpfile.js, как решить?

    irtek
    @irtek
    Wordpress-addicted
    У вас установлен gulp версии 4, а код, который вы запускаете устаревший и написан для версии 3. Там другой синтаксис и архитектура для запуска задач (tasks) была.
    Ответ написан
    8 комментариев
  • Почему не роботает Slick?

    irtek
    @irtek
    Wordpress-addicted
    Так у вас опечатка. Вместо "type" "src" должно же быть в третьей строке, где подгружаете main.js
    У вас код запуска слайдера не грузится.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/main.js"></script>
    Ответ написан
    1 комментарий
  • Почему не работает смена темы на сайте?

    irtek
    @irtek
    Wordpress-addicted
    Первый момент, в пути к файлу нужно использовать обратный слеш "/", соответственно в html нужно обновить адрес в строке
    <link rel="stylesheet" href="css/main.css" id="theme1">


    Второй момент, атрибут правильнее присваивать через метод setAttribute нежели напрямую присваивать через "="

    let switchMode = document.getElementById("theme");
    
    switchMode.onclick = function() {
        let theme = document.getElementById("theme1");
    
        if (theme.getAttribute("href") === "css/main.css") {
            theme.setAttribute("href", "css/main_dark.css");
            console.log(1);
        } else {
            theme.setAttribute("href", "css/main.css");
            console.log(0);
        }
    }
    Ответ написан
  • Как вытащить все значения из json через key?

    irtek
    @irtek
    Wordpress-addicted
    В массиве images не там key стоит в функции getPictures ну и в итоге у вас по коду вы выводите одно изображение, а вам надо все?

    Предлагаю так с вашей функцией getPictures(), которая теперь формируется набор этих изображений по продукту и затем ее добавляем в шаблон вывода

    А ошибка была в этой части
    elements[key].images.length

    key у elements, а не у images

    async function getResponse() {
                let response = await fetch('https://dummyjson.com/products')
                let jsonList = await response.json()
                let list = document.querySelector('.products')
                let key
                let elements = jsonList.products
                elements = elements.splice(0, 3)
    
                for (key in elements) {
                    function getPictures() { //вывод ключей на картинки
                        let images = ''
                        for (let i = 0, length = elements[key].images.length; i < length; i++) {
                            images += `<img src="${elements[key].images[i]}" alt="${elements[key].description}" />`
                        }
                        return images
                    }
                    list.innerHTML +=
                        `<li class="item">
                          <h5 class="small_panel">${elements[key].title}</h5>
                              <div class="full_panel">
                                  ${getPictures()}
                                  <p>brand: ${elements[key].brand}</p>
                                  <p>category: ${elements[key].category}</p>
                                  <p>${elements[key].description}</p>
                                  <p>discount percentage: ${elements[key].discountPercentage} %</p>
                                  <p>price: ${elements[key].price} usd</p>
                                  <p>rating: ${elements[key].rating}</p>
                                  <p>stock: ${elements[key].stock}</p>
                          </div>
                      </li>`
                }
            }
    
    
            getResponse()
    Ответ написан
    Комментировать
  • KNOB, получение значения?

    irtek
    @irtek
    Wordpress-addicted
    Обновите код на Codepen в блоке html на этот.

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>123</title>
    </head>
    
    <body>
      <input type="number" id="input">
      <span id="btn" onclick="btn()">Подтвердить</span>
    
      <div class="timeProgress">
        <input value="0" class="CNF">
        <h3><span id="result">0</span>/3</h3>
      </div>
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
      <script src="https://website-about.neocities.org/arcana/knob/jquery.knob.min.js"></script>
      <script type="text/javascript">
        let result_txt = document.getElementById('result');
    
        function btn() {
          var value_input = document.getElementById("input").value;
    // Меняем значение кноба и инициализируем (trigger) перерисовку
          $('.CNF')
            .val(value_input)
            .trigger('change');
          result_txt.innerHTML = value_input;
        }
        $(document).ready(function() {
          $(".CNF").knob({
            'min': 0,
            'max': 3,
            'readOnly': true,
            'width': '100%',
            'thickness': 0.2,
            'displayInput': false,
            'bgColor': 'lightskyblue',
            'fgColor': 'navy',
            'angleOffset': 0,
            'angleArc': 360
          })
        })
      </script>
    </body>
    
    </html>


    Обращаю ваше внимание, что лучше не мешать нативный JS с JQuery. Читать менее удобно. Если вы уже подключили jQuery то лучше использовать его синтаксис для получения элементов, вдобавок он короче и приятнее и не мешать с нативными getElementById и т.п.

    И в Codepen правильнее подключать JS библиотеки в блоке JS, там где "шестеренка" настроек. и весь JS код вставлять в блок JS

    Почистил ваш вариант под Codepen и перевел код для jQuery (функция нажатия кнопки перенесена в код JS)
    Codepen
    Ответ написан
    1 комментарий
  • Как проверить, что элементы с атрибутом required заполнены?

    irtek
    @irtek
    Wordpress-addicted
    Каждое содержание таба нужно обернуть, например в блок с ID атрибутом

    <div id="tab_1">
    ...
    
    <button id="tab_1_submit">Перейти к табу 2</button>
    </div>
    <div id="tab_2">
    ...
    
    <button id="tab_2_submit">Перейти к табу 3</button>
    </div>


    Далее на кнопки внутри каждого таба вешаете событие 'click', в котором проверяете есть ли значения у всех required элементов

    Если через JS в первом табе получаете список обязательных полей так

    const requiredFields = document.getElementById('tab_1').querySelectorAll('[required]')


    Если через jQuery в первом табе получаете так

    const requiredFields = $('#tab_1 [required]')

    Проходите по спискам и проверяете заполненность полей

    Получается, что из radio он находит только первый пол мужской, а элемент женский не читает, хотя он тоже считается required.
    Нужно, чтобы он проверял любой пол.


    Так и будет, т.к. поля у вас объединены общим name="gender", а атрибут required достаточно повесить на первое поле.
    Ответ написан
    1 комментарий
  • Правильно ли я упростил коллбэк через стрелочную функцию?

    irtek
    @irtek
    Wordpress-addicted
    every() это метод, а не функция, поэтому его нужно применять к объекту/массиву.
    Поэтому браузер ругается на отсутствие функции every.

    const result = [1, 2, 3, 4, 5].every(elem => elem > 0)
    console.log(result)
    Ответ написан
    Комментировать
  • Как получить текст выбранного option'а?

    irtek
    @irtek
    Wordpress-addicted
    В вашей схеме так. Найти option:selected и получить его text

    $($this).parents('.ftovrp').find('#tovrazmer').find('option:selected').text();
    Ответ написан
    1 комментарий
  • Как в WP делать переадресацию url в в зависимости от utm метки?

    irtek
    @irtek
    Wordpress-addicted
    В файл functions.php темы

    add_action( 'template_redirect', 'toster_q_1004505_redirect' );
    
    function toster_q_1004505_redirect() {
    
    	if ( ( isset( $_GET['link'] ) && ! $_GET['link'] ) || ! isset( $_GET['link'] ) ) {
    
    		$url = '/example'; // Куда переадресуем, если utm метка link пустая или отсутствует
    		wp_safe_redirect( $url ); // либо функция wp_redirect($url); если нужно переадресовать на внешний url
    		exit();
    
    	}
    
    }


    Замените функцию wp_safe_redirect($url) на функцию wp_redirect($url) если вам нужно переадресовать на внешний сайт.
    Ответ написан
  • Возможны ли одинаковые имена констант в разных файлах JavaScript?

    irtek
    @irtek
    Wordpress-addicted
    В разных файлах при модульной разработке как у вас возможны. Это независимые блоки.
    В случае обычной разработки на JavaScript, когда вы 2 файла просто объединяете методом конкатенации в один, в таком случае это превращается просто в один большой файл, тогда нет, т.к. две константы появляются в одном коде на одном уровне.
    Ответ написан
    Комментировать
  • Можно ли отключить jq от определённой страницы в wordpress?

    irtek
    @irtek
    Wordpress-addicted
    У вас чья-то готовая тема? Смотря как подключен jquery.
    Есть функции, которые отключают регистрацию скрипта jquery в Wordpress

    Эти функции отменят регистрацию скрипта jquery (функции вставляются в файл functions.php темы)
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );


    Есть функция, которая регистрирует скрипт jquery в Wordpress (НО НЕ ПОДКЛЮЧАЕТ). также вставляется в functions.php
    wp_register_script('jquery', 'URL скрипта', false, null, true );


    И есть функция, которая ПОДКЛЮЧАЕТ скрипт
    wp_enqueue_script('jquery', 'URL скрипта', false, null, true );


    Таким образом вы можете, во первых функциями deregister отменить текущее подключение и скрипт jquery, командой wp_register_script зарегистрировать скрипт, а затем подключать где нужно простой командой
    wp_enqueue_script('jquery'); там где нужно.

    1. Вы можете подключить скрипт на нужной странице добавив
    wp_enqueue_script('jquery');  // если ранее jquery был зарегистрирован или напрямую функцией
    wp_enqueue_script('jquery', 'URL скрипта', false, null, true );

    Функции вставлять ДО в шапке get_header();

    Вы также можете настроить подключение в functions.php конструкцией ниже. Обращаю внимание, что команда определения страницы is_page() не работает в functions php, поэтому можно добавить через функцию, повесив ее на хук. В рамках этой функции будет работать условная команда определения на какой странице включать jquery, а на какой нет.

    add_action('wp_enqueue_scripts', 'toster_q_479898', 99);
    function toster_q_479898() {
    if(is_page('about') {
    	wp_enqueue_script('jquery', 'URL скрипта', false, null, true );
    }
    }
    Ответ написан
    Комментировать