Ответы пользователя по тегу JavaScript
  • Получить и обработать даные, React/Redux?

    @aphows
    Redux используется как хранилище для данных, то есть ваша задача получить данные, обработать их, а потом занести их в state. Дальше можно использовать эти данные уже во вьюхах в обработанном виде.
    Асинхронность реализуется через middleware, самый распространенный - redux-thunk от gaeron. Он позволяет возвращать из экшна не объект, а функцию, в которую передастся dispatch, и через который можно будет вызвать изнутри этой функции другие экшны.

    import convert from 'xml-js'; // https://www.npmjs.com/package/xml-js
    
    class apiClient {
        get(url) {
            return Promise.resolve(/* do something async */)
        }
    }
    // actions
    export function getData() {
        return (dispatch, getState) => {
            dispatch({
                type: 'data/LOAD_STARTED',
            });
            apiClient.get('/api')
                .then((response) => {
                    const data = convert.xml2json(response.data, {compact: true, spaces: 4});
                    dispatch({
                        type: 'data/LOAD_SUCCESS',
                        payload: data
                    })
                })
                .catch((e)=> {
                    dispatch({
                        type: 'data/LOAD_ERROR',
                        payload: e,
                    })
                });
        }
    }
    Ответ написан
    2 комментария
  • Как сделать такой слайдер?

    @aphows
    Логично использовать несколько контейнеров для слайдера и при триггере slideChange менять классы в обоих контейнерах (в зависимости от вашей методики создания слайдера: лента или классы). Если вы хотите использовать готовое решение, можно подключить два слайдера slick и в одном из них указать опцию asNavFor (kenwheeler.github.io/slick раздел slider syncing).
    Ответ написан
  • Помоготи пожалуйста, не работает метод click ?!?!?

    @aphows
    Кнопка не работала из-за того, что ее бинд на событие "клик" находился вне document ready, то есть элемента dom модели в тот момент, когда вы произвели бинд, не существовало. Небольшой и на скорую руку рефактор кода чуть ниже. Учитесь делать ваш код модульным и читабельным, если не можете построить архитектуру в соответствии с ООП - хотя бы группируйте код, оборачивайте в функции, как показано ниже. Ну и не забывайте о простом правиле: привязку событий (bind events) проводить в document ready. Клон кода на codepen
    $(document).ready(function() {
      slider();
      mobileMenu();
      scrollToId();
      showContentOnScroll();
      contentMenu()
    });
    
    function slider() {
      $('.sm_slider').smSlider({
        duration: 1500,
        autoPlay: true,
        delay: 20000,
        hoverPause: false
      });
    }
    
    function mobileMenu() {
    
      var touch = $('.menu-bar li:first-child  a');
      var menu = $('.sub-menu-bar-1');
    
      touch.on('click', function(e) {
        /*    У вас было:  $(touch).on('click', function(e) {
          touch - уже объект jquery, его не нужно оборачивать в конструкцию $()
         если touch - строка, тогда его нужно обернуть в $(), если вы хотите применять функции jquery
         Пример:
         var touch = '.menu-bar li:first-child  a';
         $(touch) - объект jquery
         
         Хорошая практика  - называть переменные, которые являются объектами jquery, по принципу $var, так легче читать код вам и вашим коллегам
         $touch = $('.menu-bar li:first-child  a');  // объект
         touch = '.menu-bar li:first-child  a'; // строка
         $(touch) // объект jquery
         
        */
        e.preventDefault();
        menu.slideToggle();
      });
    }
    
    function scrollToId() {
      $('a[href*=#]').click(function() {
        $("html:not(:animated),body:not(:animated)")
          // что значит псевдокласс :animated ?  я такого не знаю
          .animate({
            scrollTop: $($(this).attr("href")).offset().top
          }, 2000);
        return false;
      });
    }
    
    function showContentOnScroll() {
      $(window).scroll(function() {
        var bo = $("body").scrollTop();
        if (bo > 990) {
          $(".cont").css("display", "block");
        } else {
          $(".cont").css("display", "none");
        };
      });
    }
    
    function contentMenu() {
      $('.cont').click(function() {
        $(".cont").toggleClass('rotate-m');
        $(".menu-link").toggleClass('close');
        $(".menu").toggleClass('rigth-m');
      });
    }
    Ответ написан
    Комментировать