// Находим элемент по 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 без использования сторонних библиотек.
allcashОракул (74110)
9 месяцев назад
Вот я вынес функции вашу отдельно, а обращаюсь к примеру в HistoryAPI, который без перезагрузки так: favid.removeEventListener('click', handleClick);
favid.addEventListener('click', handleClick);
Но если обновить страницу код уже не выполняется, как отловить этот статус когда уже содержимое прогрузилось или когда страница была перезагружена
$('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);
}
});
});