javascript - 将鼠标悬停在元素上时触发 javascript

Question

我有html以下。你可以看到一个live版本。
正如你所看到的，我有多个 <h3>元素，带有名称，当您单击名称时，会显示一个子列表 SlideToggle() .
我需要在悬停该对象 2 秒时激活此点击效果。
当我悬停该元素时，我需要复制点击效果。
我可以用click来做到这一点事件，但我想不出一种方法来做到这一点<h3使用 hover 的元素效果。

   <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 

我当然不能这么做。那么我该如何动态地做到这一点？

Answer 1

您有很多选择来实现这一目标，在我看来，两种最基本的方法是:

1.) 使用类选择器绑定(bind) .hover 事件。看起来您可以使用教授名称:

$(".prof-name").hover 

2.) 如果定期加载元素，则使用委托(delegate)，您可能需要添加一个包装类:

<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(){

});