在元素悬停时触发javascript
Fire javascript when hovering an element
我有下面的html
。你可以看到一个实时版本。
正如你所看到的,我有多个<h3>
元素,有名字,当你点击名字时,一个子列表显示SlideToggle()
。
我需要在对象悬停2秒时激活点击效果。
我需要在元素悬停时复制点击效果。
我可以在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>
我可以得到想要的效果,但只硬编码元素的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>
您将在这里看到硬代码:
$("h3[data-id='3']").hover
我当然不能那样做。那么我如何动态地做到这一点呢? 您有很多选择来实现这一点,我认为两个最基本的方法是:
1.)使用类选择器绑定.hover
事件。看起来你可以使用prof-name
:
$(".prof-name").hover
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>
然后像这样写:
$(".wrapper").on('hover', '.prof-name', function(){
});
在mouseenter
启动超时,在mouseleave
清除超时
如果超时达到了它的终点,如果您已经将click
函数绑定到该元素,则只使用$hoveredElSelector.trigger("click")
。
您也可以先创建函数,并总是在click或
mouseenter mouseleave
(.hover()
)时启动超时-只需为click使用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);
这是一个生活例子
相关文章:
- 如何找到Javascript元素的最长边
- 如何通过它瞄准javascript元素's的onclick属性
- Javascript元素相对于屏幕的位置
- 找不到javascript元素
- JavaScript元素遍历返回的值超出预期
- 没有获得基础's的Javascript元素工作(与Laravel和Elixir)
- 为什么在ASP.NET Ajax更新面板中执行任何操作后javascript元素都停止工作
- 将 JavaScript 元素 ID 传递给 PHP 或 Form Variable
- Javascript元素相互阻塞
- CefSharp javascript元素点击不;不起作用,但手动点击它可以
- javascript元素.click()发布Safari
- Javascript元素更新侦听器
- Javascript 元素值的总和
- 在 php 代码中调用 javascript 元素
- If-Statement中的Javascript元素验证
- JavaScript 元素识别和检索
- 单击内部锚点/哈希时自动更新 JavaScript 元素
- 将 JavaScript 元素作为变量传递
- 按下表单重置按钮时删除 JavaScript 元素
- 将 javascript 保留在新的 JavaScript 元素中