懸停元素時觸發JavaScript

Question

我有下面的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 

我當然不能那樣做。 那么我該如何動態地做到這一點呢？

Answer 1

在mouseenter啟動超時，在mouseleave清除超時。
如果超時到了終點，如果已經有綁定到該元素的click函數，則只需使用$hoveredElSelector.trigger("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); 

這是一個生動的例子

Answer 2

您可以通過多種方法來實現此目的，imo的兩個最基本的方法是：

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

});