Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как переписать этот код на чистый js?

Paho Оракул (62520), открыт 2 недели назад
$('a#favid').off('click');
$('a#favid').on('click', function(){
var data = $(this).data('id');
var id = $(this).data('id');
$.post("../pdo.php",{data:data} ,function(data)
{
if(data==0)
{
$('img#'+id).css('opacity', 1);
}
if(data==1)
{
$('img#'+id).css('opacity', 0.2);
}
});
});
1 ответ
Татьяна Просветленный (32633) 2 недели назад
 // Находим элемент по id 
var favid = document.getElementById('favid');

// Удаляем предыдущие обработчики событий
favid.removeEventListener('click', handleClick);

// Добавляем новый обработчик событий
favid.addEventListener('click', handleClick);

// Функция-обработчик события click
function handleClick(event) {
// Предотвращаем стандартное поведение ссылки
event.preventDefault();

// Получаем значение data-id атрибута
var id = this.dataset.id;

// Создаем новый экземпляр объекта XMLHttpRequest
var xhr = new XMLHttpRequest();

// Устанавливаем метод и URL-адрес для отправки данных
xhr.open('POST', '../pdo.php', true);

// Устанавливаем заголовок Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// Отправляем запрос
xhr.send('data=' + id);

// Определяем функцию обратного вызова для обработки ответа от сервера
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // Запрос завершен и ответ получен
if (xhr.status === 200) { // Код состояния HTTP 200 (OK)
// Получаем ответ от сервера
var data = xhr.responseText;

// Обрабатываем ответ
if (data === '0') {
// Если ответ равен "0", устанавливаем opacity 1
document.getElementById(id).style.opacity = 1;
} else if (data === '1') {
// Если ответ равен "1", устанавливаем opacity 0.2
document.getElementById(id).style.opacity = 0.2;
}
} else {
// Обработка ошибок, если необходимо
console.error('Ошибка: ' + xhr.status);
}
}
};
}




Этот код выполняет те же самые действия, что и исходный код на jQuery, но использует чистый JavaScript без использования сторонних библиотек.
PahoОракул (62520) 2 недели назад
Вот я вынес функции вашу отдельно, а обращаюсь к примеру в HistoryAPI, который без перезагрузки так: favid.removeEventListener('click', handleClick);
favid.addEventListener('click', handleClick);
Но если обновить страницу код уже не выполняется, как отловить этот статус когда уже содержимое прогрузилось или когда страница была перезагружена
Татьяна Просветленный (32633) Paho, Чтобы ваш код корректно выполнялся после обновления страницы или при полной загрузке содержимого, нужно убедиться, что элемент с id favid существует и DOM полностью загружен перед добавлением обработчиков событий. Для этого можно использовать событие DOMContentLoaded.
Похожие вопросы