Member 14505926 Ответов: 1

Какова будет функция jquery для typescript?


Hello, I am starting my studies in `TypeScript` and am putting together a submenu with `Bootstrap` where I will need to insert code that I found, but it is in `JQuery`. I am not able to convert it to `TypeScript`. Can someone here help me to turn this code to `TypeScript`?

    $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
      if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
      }
      var $subMenu = $(this).next(".dropdown-menu");
      $subMenu.toggleClass('show');
    
    
      $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass("show");
      });
    
    
      return false;
    });


Откуда я его взял: https://codepen.io/surjithctly/pen/PJqKzQ[^]

Что я уже пробовал:

function getParents(el, parentSelector) {

    // If no parentSelector defined will bubble up all the way to *document*
    if (parentSelector === undefined) {
        parentSelector = document;
    }

    var parents = [];
    var p = el.parentNode;

    while (p !== parentSelector) {
        var o = p;
        parents.push(o);
        p = o.parentNode;
    }
    parents.push(parentSelector); // Push that parentSelector you wanted to stop at

    return parents;
}



var addDropDown = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');

        for (var i = 0; i < addDropDown.length; i++) {
            addDropDown[i].addEventListener('click', function (e) {

                if (!this.nextElementSibling.classList.contains('show')) {

                    var elemento = getParents(this, document.getElementsByClassName("dropdown-menu"))[0].querySelectorAll('.show');

                    for (var z = 0; z < elemento.length; z++) {
                        elemento[i].addEventListener('click', function (e) {
                            elemento[z].classList.remove("show");
                        });
                    }
                    
                }
                var $subMenu = this.nextElementSibling(".dropdown-menu");
                $subMenu.classList.toggle('show');

                this.parentNode('li.nav-item.dropdown.show').addEventListener('hidden.bs.dropdown', function (e) {
                    var itensLista = document.querySelectorAll('.dropdown-submenu .show');

                    for (var x = 0; x < itensLista.length; x++) {
                        itensLista[i].classList.remove("show");
                    }
                });


                return false;
            });
        }

1 Ответов

Рейтинг:
1

Thomas Daniels

Вам просто нужно установить определения типов, чтобы компилятор TypeScript знал, что происходит: Как использовать jQuery с TypeScript - Stack Overflow[^]
И тогда вы можете использовать $ как обычно.

[Правка после вашего комментария]

А, понятно.

Я не собираюсь переводить весь фрагмент кода, но то, что вам нужно сделать, - это точно понять, что делает код, и искать эквивалентную функциональность в обычном JavaScript или TypeScript. Например, $('.dropdown-menu a.dropdown-toggle') было бы document.querySelectorAll('.dropdown-menu a.dropdown-toggle')

Вы также можете найти этот ресурс интересным, который показывает вам, как общие функции jQuery могут быть реализованы в чистом JavaScript, так что их использование в TypeScript тоже тривиально: http://youmightnotneedjquery.com[^]


Member 14505926

Então Thomas, na verdade eu gostaria de usar somente o TS, sem colocar o JQuery no meio sabe.

Thomas Daniels

Я отредактировал свой ответ.

Member 14505926

Спасибо за ответ, он мне очень помог, но у меня сразу же возникла проблема в этой первой части, сразу после "querySelectorAll ()". я ставлю "addEventListener", но это дает ошибку. И знаете почему?

Thomas Daniels

querySelectorAll возвращает массив, а addEventListener работает только с элементами, а не с массивами. Выполните цикл над массивом и установите прослушиватель событий для каждого элемента. Или, если вы знаете, что будет только один элемент, вы можете сделать querySelector (без 'All'), чтобы получить только один элемент.

Member 14505926

Только одна вещь... JQuery ".parents()", я его не нашел. Я основал
A JQuery ".parent", который в typescript будет выглядеть как ".parentNode", но не работает. Я отредактирую вопрос и поставлю его так, как делаю сейчас

Thomas Daniels

А как насчет родительского контроля? Хотя в подавляющем большинстве случаев это одно и то же... Как это не работает?

Member 14505926

Ошибку, которая появляется это: Неперехваченные ошибку TypeError: это.parentElement-это не функция
     в HTMLAnchorElement. <anonymous>

Thomas Daniels

А, ты используешь это как функцию. Вы должны использовать его как свойство, например this.parentElement и нет this.parentElement().

Member 14505926

Я все еще сжимаю его, но это что-то другое. Будьте текущим кодом в вопросе, а также ошибкой, которую вы даете. Если вы можете мне еще чем-то помочь, спасибо.

Thomas Daniels

О, я думаю, что понимаю, почему это не сработает. Что ж, parents просто у него нет чистой альтернативы JavaScript/TypeScript в качестве единственного вызова функции. Вот способ реализации Альтернативы для parents: https://stackoverflow.com/a/12981248/2619912

Но при переписывании jQuery на чистый JavaScript (или TypeScript) может быть полезно просто переписать весь код, а не переводить его напрямую, потому что прямой перевод может стать грязным.

Member 14505926

не работает

Thomas Daniels

Что не работает?

Member 14505926

Ошибка:
Uncaught TypeError: this.getParents не является функцией
в HTMLAnchorElement.

Я обновлю вопрос с помощью своего кода

Thomas Daniels

Вы можете сделать это.getParents, вам придется сделать getParents(это).

Member 14505926

когда я ставлю getParents(this), ошибка переходит в .first

Ошибка: свойство 'first' не существует для типа 'any[]'

Thomas Daniels

'first' не существует в чистом JavaScript, попробуйте вместо этого использовать индексатор массива [0].

Member 14505926

Хорошо, это работает, но это требует еще одной ошибки.

Uncaught TypeError: не удается прочитать свойство 'parentNode' null.

я debbug код, 'Эль' возвращение 'а.в выпадающем списке-пункт.выпадающего-включить {цель: "" скачать: "", пинг: "", ...}', а 'P' является 'ли.выпадающего подменю {значение: 0, Тип: "", заголовок: "", ...}'

Thomas Daniels

Это означает, что любой элемент, который вы запрашиваете у родительского узла, является нулевым. Если вы ожидаете, что он не будет нулевым, проверьте, почему это происходит (например, если у вас есть правильные селекторы).

Member 14505926

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

Thomas Daniels

Из того, что я вижу, параметр parentSelector для getParents должен быть одним единственным элементом, а не массивом элементов. Если вы хотите настроить это, вам придется самостоятельно отредактировать функцию getParents.