Я пытаюсь создать сценарий, который, когда я "навешиваю" определенный элемент html с определенным идентификатором id="HighlightCustomerName"
, что только после того, как он удерживает этот "зависание" в течение 2 или более секунд, функция временно применит класс class="highlighted"
элементам HTML с другим классом class="2Bhighlighted"
.
См. Ниже, это не работает, но я думаю, что это иллюстрирует то, что я пытаюсь сделать:
HTML:
<span id="HighlightCustomerName">John Doe</span>
<span class="2Bhighlighted">John Doe</span>
Jquery:
$(document).ajaxSuccess(function () {
$(".#HighlightCustomerName").hover(function () {
$(".2Bhighlighted").delay(2000).addclass("highlighting")
});)
if ( $(".2Bhighlighted").hasClass("highlighting"))
{
$(".2Bhighlighted").addClass("highlighted")
}
else{
$(".highlighted").removeclass("highlighted")
}
});
CSS:
highlighted {bakcground-color: yellow!important;}
Это хороший способ приблизиться к этому? У кого-нибудь есть лучший способ сделать это? Я просто собираюсь
Вы можете использовать css3-переходы и вообще избегать jquery:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Answer</title>
<script>
function changeStyle(className, colorName) {
var element = document.getElementsByClassName(className);
element[0].style.transition = "background 1.0s linear 2.0s";
element[0].style.background = colorName;
}
</script>
</head>
<body>
<span id="HighlightCustomerName"
onmouseover="changeStyle('2Bhighlighted','yellow');"
onmouseout="changeStyle('2Bhighlighted','white');">John Doe</span>
<span class="2Bhighlighted">John Doe</span>
</body>
</html>
var element = $('#hoverMe');
hoverChange(element, function() {
element.addClass('red');
});
function hoverChange(element, fn) {
var timer = null;
element.mouseenter(function() {
timer = setTimeout(function() {
fn();
}, 2000)
});
element.mouseout(function() {
clearTimeout(timer);
});
}
Попробуйте здесь:
var highlightTimeout;
$("#HighlightCustomerName").hover(function () {
highlightTimeout=setTimeout(function(){
$(".2Bhighlighted").addclass("highlighting");
}, 2000);
}, function(){
$(".highlighted").removeclass("highlighted"); // no point checking, just remove it
clearTimeout(highlightTimeout); // this prevents it from happening
});
Также обратите внимание на свой селектор .#HighlightCustomerName
было неправильным
Для этого необходимо установить и очистить таймер:
setTimeout()
для удаления временного классаВот код с некоторыми пояснительными комментариями:
var timer;
$("#HighlightCustomerName").hover(function () {
// if a timer was already running, clear it so we never have multiple ones
clearTimeout(timer);
// set a timer for 2 seconds
timer = setTimeout(function() {
// we've been hovering for 2 seconds
// add your class here
$(".2Bhighlighted").addClass("highlighting");
// then remove the class 5 seconds later
setTimeout(function() {
$(".2Bhighlighted").removeClass("highlighting");
}, 5000);
}, 2000);
}, function() {
// if we stop hovering, clear the timer
clearTimeout(timer);
});
У вашего кода также был ряд других ошибок:
У вас был селектор ".#HighlightCustomerName"
который выглядит неправильно. Вы либо запрашиваете класс с a .
или идентификатор с #
, но не оба.
Ваша капитализация addClass()
и removeClass()
.
if ( $(".2Bhighlighted").hasClass("highlighting"))
Это условие не имеет смысла. Просто$(".highlighted").removeclass("highlighted")
- если у него нет класса, он ничего не сделает.