Добавить параметр к ссылкам без jQuery
Javascript

Добавить параметр к ссылкам без jQuery

Сегодня небольшой лайфхак. Ок очень пригодится тем, кто интересуется таким вопросом, как SEO оптимизация Белореченск. Разберемся как без каких-либо зависимостей (jQuery и т.п.) можно добавить какой-нибудь важный параметр к ссылкам без jQuery, например данные, выбранные пользователем в форме.

Только Javascript

В javascript есть замечательные функции querySelector и querySelectorAll. Они позволяют выполнять поиск элементов в дереве DOM при помощи CSS селекторов. То есть по сути выполняет одну из основных фишек jQuery, и позволяет отказаться от него вообще.

Примеры

Посмотрим что с этим можно сделать, например document.querySelector(‘a.out’) вернет вам элемент тэга a, у которых есть класс out.

В чем разница между querySelector и querySelectorAll

Всё очень просто и очевидно из названия, querySelector вернет первый найденный элемент, querySelectorAll – массив всех найденных.

Перейдем к нашей задаче

Нам нужно добавить параметр из поля для ввода во все ссылки, которые содержат слово download, например, все ссылки на файл download.php должны получить в конце _GET параметр с именем файла из поля для ввода.

document.querySelector(‘input’).addEventListener(‘keyup’, function(el){

var val = el.value

document.querySelectorAll(‘a[href*=»download»]’).forEach(function(a){

a.href += «?file=»+val

})

})

Вот и всё. Добавили.

Также давайте посмотрим, как это можно сделать используя анонимные функции. Преимущество этих функций том, что они не требуют дополнительного объявления, позволяют сделать код более читабельным и коротким, а также имеют область видимости той области в которой они вызваны (то есть область видимости проходит в них «насквозь»), что позволяет сделать их универсальными бойцами, которые можно легко применить в нужном месте кода (особенно, если эта функция будет срабатывать только в этом месте, и не будет использоваться в других областях кода).

Итак перепишем код выше в код с анонимными функциями.

document.querySelector(‘input’).addEventListener(‘keyup’,el=>{

var val = el.value

document.querySelectorAll(‘a[href*=»download»]’).forEach(a=>{

a.href += «?file=»+val

})

})

По сути тоже самое, только короче и удобнее.

Также обратите внимание, что в коде мы используем функцию addEventListener, которая привязывает действие на событие, которое происходит с элементом. В нашем случае, это событие keyup у input, и в нём вызывается функция.


Также рекомендуем: