Как преобразовать этот jQuery код в обычный JavaScript? - PullRequest
Новая
       34

Как преобразовать этот jQuery код в обычный JavaScript?

0 голосов
/ 21 января 2020

Я пытаюсь получить метод фокусировки (касание, мышь или клавиатура) для ссылок, устанавливающих data-attribute. 

$(function() {
    var i,
        r = document.getElementsByTagName("a")[0];

    if ("ontouchstart" in window) {
        document.addEventListener("touchstart", function(event) {
            i = "touch";
        }, true);
    }
    else {
        document.addEventListener("mousedown", function(event) {
            i = "mouse";
        }, true);
    }
    document.addEventListener("keydown", function(event) {
        i = "keyboard";
    }, true);
})

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

    $("a").focus(function() {
        $(this).attr("data-focus-method", i)
    })
    $("a").blur(function() {
        $(this).removeAttr("data-focus-method")
    })

И я хочу написать весь код простым JavaScript. Я пробовал способ ниже: 

    r.addEventListener("focus", function() {
        r.setAttribute("data-focus-method", i);
    });
    r.addEventListener("blur", function() {
        r.removeAttribute("data-focus-method");
    });

Но это не работает. Может кто-нибудь помочь мне, пожалуйста?

Ответы [ 3 ]

1 голос
/ 21 января 2020

Я предлагаю использовать метод querySelectorAll и использовать forEach для итерации списка узлов 

document.querySelectorAll("a").forEach((link) => {
  link.addEventListener("focus", function() {
    this.setAttribute("data-focus-method", i);
  });
  link.addEventListener("blur", function() {
    this.removeAttribute("data-focus-method");
  });
});
0 голосов
/ 21 января 2020

Я получил решение, добавив: 

    var w;
    for (w = 0; w < r.length; w++) {
        r[w].addEventListener("focus", function() {
            this.setAttribute("data-focus-method", i);
        });

        r[w].addEventListener("blur", function() {
            this.removeAttribute("data-focus-method");
        });
    }

Кстати, спасибо всем, кто мне помог!

0 голосов
/ 21 января 2020

Я не уверен, почему вы пытаетесь переопределить метод i on при каждом нажатии клавиши на клавиатуре. Тем не менее, я предполагаю, что это желаемый эффект, так как вы не упоминаете об этом в своем вопросе.

Тем не менее, есть кое-что, что поможет вам приблизиться к вашей цели - ванильной JS версии кода.

В ответе используется оператор распространения для преобразования nodeList, полученного из getElementsByTagName, в массив, а затем forEach () в l oop через массив Предметы. Для каждого элемента мы добавляем два прослушивателя событий. один для focus и один для blur.

Когда мы сфокусированы, мы добавляем атрибут. Когда размыто мы удаляем атрибут. Я выбрал установить атрибут и удалить атрибут , но вы также можете использовать набор данных , если хотите.

Чтобы определить, что i ( метод), я использовал let и троичный оператор .

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

let i = ("ontouchstart" in window) ? "touch" : "mouse";

document.addEventListener("keydown", () => {
  i = "keyboard"
})

const links = [...document.getElementsByTagName("a")];

links.forEach(link => {
  link.addEventListener("focus", () => {
    link.setAttribute('data-focus-method', i);
  });
  link.addEventListener("blur", () => {
    link.removeAttribute('data-focus-method');
  })
})
<a href="#">My link 1</a>
<a href="#">My link 2</a>
<a href="#">My link 3</a>
...