Страницы

Поиск по вопросам

вторник, 21 мая 2019 г.

Как преобразовать jq в чистый js?

Есть код, который использует jq. Не хотелось бы загружать библиотеку , только из-за нескольких строк кода. Помогите преобразовать код в чистый js.
$('document').ready(function(){ $('.historyAPI').on('click', function(e){ // отменяем стандартное действие при клике e.preventDefault(); // Получаем адрес страницы var href = $(this).attr('href'); // Передаем адрес страницы в функцию getContent(href, true); }); });
// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере window.addEventListener("popstate", function(e) { // Передаем текущий URL getContent(location.pathname, false); });
// Функция загрузки контента function getContent(url, addEntry) { $.get(url).done(function(data) { // Обновление только текстового содержимого в блоке $('#content').html($(data).find("#content").html()); $('#content2').html($(data).find("#content2").html()); // Если был выполнен клик в меню - добавляем запись в стек истории сеанса // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо if(addEntry == true) { // Добавляем запись в историю, используя pushState history.pushState(null, null, url); } }); }
Пока что получилось вот так:
document.addEventListener('DOMContentLoaded',function(){
[].forEach.call( document.getElementsByClassName('historyAPI'), function(e) {
// отменяем стандартное действие при клике e.preventDefault(); // Получаем адрес страницы var href = $(this).attr('href'); // Передаем адрес страницы в функцию getContent(href, true);
});

// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере window.addEventListener("popstate", function(e) { // Передаем текущий URL getContent(location.pathname, false); });
// Функция загрузки контента function getContent(url, addEntry) { $.get(url).done(function(data) { // Обновление только текстового содержимого в сером блоке $('#content').html($(data).find("#content").html()); $('#content2').html($(data).find("#content2").html()); // Если был выполнен клик в меню - добавляем запись в стек истории сеанса // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо if(addEntry == true) { // Добавляем запись в историю, используя pushState history.pushState(null, null, url); } }); }


Ответ

$('.historyAPI').on('click', function(e){
Лучше всё это заменить на обработку всплытия клика:
document.addEventListener('click', function (e) { var a = e.target.closest("a.historyAPI"); a && getContent(a.href, true); });
$.get(url).done(function(data) { // Обновление только текстового содержимого в сером блоке $('#content').html($(data).find("#content").html()); $('#content2').html($(data).find("#content2").html());
Приблизительно так:
fetch("url").then(function (resp) { return resp.text(); }).then(function (data) { var doc = (new DOMParser).parseFromString(data, "text/html");
for (var id of ["content", "content2"]) { var dest = document.getElementById(id); var elem = doc.getElementById(id);
if (elem) { dest.parentElement.replaceChild(elem, dest); } else { dest.textContent = ""; } }

Комментариев нет:

Отправить комментарий