[英]Fire javascript when hovering an element
I have the html
below. 我有下面的
html
。 You can see a live version. 您可以看到实时版本。
As you can see I have multiples <h3>
elements, with names, and when you click on the name, a sublist shows up with SlideToggle()
. 如您所见,我有多个带有名称的
<h3>
元素,当您单击名称时,带有SlideToggle()
的子列表就会出现。
I need to active this click effect when hovering that object for 2 seconds. 将对象悬停2秒钟时,需要激活此点击效果。
I need to replicate the click effect when I'm hovering that element. 悬停该元素时,我需要复制点击效果。
I could do it with the click
event, but I can't figure out a way to do it to all <h3
elements using the hover
effect. 我可以使用
click
事件来完成此操作,但无法找到一种使用hover
效果对所有<h3
元素执行此操作的方法。
<li>
<h3 data-id="3" class="prof-name">Sigmund Berge
<input type="checkbox" name="" value="" class="check_prof">
</h3>
<ul class="list-disc ui-sortable" id="oi" style="display: none;">
<li data-dia="seg" data-time="08:30:00" data-id="1" class="ui-sortable-handle">Lab I</li>
<li data-dia="ter" data-time="10:30:00" data-id="2" class="ui-sortable-handle">Lab II</li>
</ul>
</li>
<li>
<h3 data-id="4" class="prof-name">Eusebio Rice
<input type="checkbox" name="" value="" class="check_prof">
</h3>
<ul class="list-disc ui-sortable">
<li data-dia="sex" data-time="18:30:00" data-id="5" class="ui-sortable-handle">Estatistica</li>
<li data-dia="seg" data-time="08:30:00" data-id="6" class="ui-sortable-handle">Calculo A</li>
</ul>
</li>
<li>
<h3 data-id="5" class="prof-name">Dr. Andy Bailey
<input type="checkbox" name="" value="" class="check_prof">
</h3>
<ul class="list-disc ui-sortable">
<li data-dia="qua" data-time="14:30:00" data-id="3" class="ui-sortable-handle">Engenharia de Software</li>
</ul>
</li>
<li>
<h3 data-id="6" class="prof-name">Mr. Durward Crooks I
<input type="checkbox" name="" value="" class="check_prof">
</h3>
</li>
</ul>
I could get the desire effect but only hard coding the element's ID (just for test) and it worked: 我可以获得期望的效果,但仅对元素的ID进行了硬编码(仅用于测试),并且可以正常工作:
//HOVER effect
<script type="text/javascript">
$(function(){
var old_teacher;
$('.list-disc').sortable({
connectWith: '.list-disc',
over: function(event, ui){
var timeoutId;
$(".prof-name").hover(function(event) {
var $obj = event.target;
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
console.log($(this));
}, 2000);
}
},
function (event) {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$(event.target).next().slideToggle();
}
});
},
start: function (event, ui){
old_teacher = ui.item.parent().prev().attr('data-id');
},
stop: function (event, ui){
$.ajax({
type: "POST",
url: '{{ URL::to("/professor") }}',
data: { disciplina: ui.item.attr('data-id'), professor: ui.item.parent().prev().attr('data-id'), old: old_teacher },
success: function(data){
},
error: function(data){
console.log( old_teacher);
}
});
}
});
})
</script>
You will see the hard code here: 您将在此处看到硬代码:
$("h3[data-id='3']").hover
I can't do that of course. 我当然不能那样做。 So how may I do that dynamically ??
那么我该如何动态地做到这一点呢?
On mouseenter
start the timeout, on mouseleave
clear the timeout. 在
mouseenter
启动超时,在mouseleave
清除超时。
If the timeout reaches it's end point, just use $hoveredElSelector.trigger("click")
if you already have a click
function bound to that element. 如果超时到了终点,如果已经有绑定到该元素的
click
函数,则只需使用$hoveredElSelector.trigger("click")
。
mouseenter mouseleave
( the .hover()
) - just using a 0
timeout for the click:
mouseenter mouseleave
( .hover()
)时启动超时-只需为单击使用0
超时:
function ANIM() { $(this).next().slideToggle( $.proxy(CLEAR,this) ); } function CLEAR() { return clearTimeout( this.timeout ); } function SET() { this.timeout = setTimeout( $.proxy(ANIM,this), event.type==="click"?0:2000 ); } $("h2").click(ANIM).hover(SET, CLEAR);
You have many options for achieving this, imo the two most basic methods being: 您可以通过多种方法来实现此目的,imo的两个最基本的方法是:
1.) Use a class selector for binding the .hover
event. 1.)使用类选择器绑定
.hover
事件。 Looks like you can use prof-name
: 看起来您可以使用
prof-name
:
$(".prof-name").hover
2.) Use delegation if the elements are loaded periodically, you would probably want to add a wrapper class: 2.)如果元素是定期加载的,则使用委托,您可能想要添加包装器类:
<div class='wrapper'>
...
<li>
<h3 data-id="3" class="prof-name">Sigmund Berge
<input type="checkbox" name="" value="" class="check_prof">
</h3>
<ul class="list-disc ui-sortable" id="oi" style="display: none;">
<li data-dia="seg" data-time="08:30:00" data-id="1" class="ui-sortable-handle">Lab I</li>
<li data-dia="ter" data-time="10:30:00" data-id="2" class="ui-sortable-handle">Lab II</li>
</ul>
</li>
...
</div>
Then use something like: 然后使用类似:
$(".wrapper").on('hover', '.prof-name', function(){
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.