Невозможно переопределить атрибут данных data-aplay в jQuery при наведении курсора

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

HTML код:

<div id = "featured" class = "swiper-container gloria-sliders events-list-carousel swiper-container-horizontal swiper-container-undefined" data-item = "3" data-column-space = "1" data-sloop = "true" data-aplay = "4000">

Как видите, он по умолчанию устанавливает для атрибута данных data-aplay значение 4000.

Прикрепление скрипта ниже:

<script>
 $("#featured").hover( function () {
 console.info('hover');
 var featured = $('#featured').data('aplay','false');
 console.info($('#featured').data('aplay'));
}, function() {
 console.info('not hovered');    
 $('#featured').data('aplay','4000');
 console.info($('#featured').data('aplay')); 
}); 
</script>

При наведении курсора отображается:

hover

false

Но он не обновляет значение data-aplay, даже когда я удаляю наведение, которое он отображает

not hovered

4000

Если потребуется дополнительная информация, дайте мне знать. Любая помощь будет оценена. Спасибо

ОБНОВИТЬ

var stopScroll = setInterval(function(){ $(".metalhead").click(); }, 4000) ;

 $('.oswald, .image a').click(function() {
    clearInterval(stopScroll);
    });

 $('#featured').mouseover(function(){
    clearInterval(stopScroll);
 }).mouseout(function(){
    stopScroll = setInterval(function(){ $(".metalhead").click(); }, 4000) ;
 })

Сейчас я использую setInterval и clearInterval. В какой-то степени это работает. Но все равно не точно

<i class = "fa fa-angle-right metalhead" id = "scroll" aria-hidden = "true"></i>

Итак, сейчас я добавляю функцию, позволяющую щелкать стрелку вправо каждые 4 секунды. Итак, на mouseover я использую clearInterval, чтобы удалить таймер, а на mouseout, используя setInterval, чтобы вернуться к 4 секундам.

Я также добавил еще одну функцию, которая останавливает ползунок при нажатии на определенный элемент. Однако все еще не уверен, что он работает правильно.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
32
1

Ответы 1

Я действительно считаю, что он правильно меняет свойство данных, только это не обновляет Посмотреть атрибута, попробуйте что-то вроде этого:

$(document).ready(function() {
var featured=$('#featured');
 featured.hover( function () {
 console.info('hover');
 featured.data('aplay','false');
 featured.removeAttr('data-aplay')
 console.info(featured.data('aplay'));
}, function() {
 console.info('not hovered');    
 featured.attr('data-aplay', '4000')
 featured.data('aplay','4000');
 console.info(featured.data('aplay')); 
}); 
});

Привет, спасибо за ответ, я посмотрю на это.

DEV 16.03.2018 05:10

ОБНОВЛЕНИЕ: Атрибут был удален, но мой ползунок все еще движется при наведении курсора. Есть ли способ отменить это?

DEV 16.03.2018 05:14
.prop() или .attr() - это функции, которые влияют на атрибут. .data() - это сумка с памятью. Читайте здесь: jqapi.com/#p=prop
Benny 16.03.2018 07:26

@ Бенни Так то, что я пробую здесь, не сработает? Есть ли другое решение для того же?

DEV 16.03.2018 08:27

@davidnoronha, можете ли вы опубликовать полный код онлайн в Codepen или Jsfiddle и т. д.? Это поможет нам помочь вам

Benny 16.03.2018 08:42

@Benny Дело в том, что это сайт на wordpress, а карусель из темы. Я обновил код, но он по-прежнему работает не так, как планировалось. Я обновлю код здесь, чтобы вы могли мне помочь.

DEV 16.03.2018 08:51

@davidnoronha чем не работает? И почему это неточно (ваши слова)?

Benny 16.03.2018 09:53

Другие вопросы по теме