如何将以下JS转换为JQuery？ [英] How to convert following JS to JQuery?

问题描述

我很难将以下JS转换为JQuery。

I'm having a hard time converterting the following JS to JQuery.

我的项目有一个 #HoverMe div，我将鼠标悬停在其中以显示 #hidden div中的内容。

My project have a #HoverMe div where I hover it to display the content inside #hidden div.

脚本从（此问题，通过anied ） ）。我试图重写 document.getElementById（HoverMe）; 到 $（＃HoverMe / code>等等，但是我不能再进一步，因为我的理解在jQuery是零。

I've a well working JS script from ( this question, by anied). I tried to re-write document.getElementById("HoverMe"); to $("#HoverMe").hover(function() { etc, but I can't go any further as my understanding in jQuery is zero.

这是我的div看起来像

This is how my divs look like

                      ------------     --------- _
                     |  #HoverMe   |  | #hidden |S| //hover #HoverMe to display #hidden                           
                      ------------    | --------|R|
                                      | car.name|O|       
                                      |---------|L|
                                      | car.name|L|
                                       ---------|B|
                                      | car.name|A|
                                      |---------|R|
                                      | car.name| |
                                       ---------|_|
<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

        @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
            <div>@car.Name</div>
       }

    </div>
</div>

如何将以下JS转换为JQuery？

    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");
    var timeoutId;

    function showPopup() {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";
    }

    function hidePopup() {
        popupEle.style.display = "none";
    }

    hoverEle.addEventListener('mouseover', function () {
        showPopup();
    }, false);

    hoverEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup();
        }, 1500);
    }, false);

    popupEle.addEventListener('mouseover', function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
        }
    }, false);

    popupEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup();
        }, 1500);
    }, false);

</script>

推荐答案

使用其ID选择元素

这是您使用 js

var hoverEle = document.getElementById("HoverMe");
var popupEle = document.getElementById("hidden");

这是如何使用 jQuery p>

this is how you can do same thing like above using jQuery

var hoverEle = $("#HoverMe") // this select the element which its id="HoverMe"

这样，你也可以选择其他元素。如果它是id你应该使用＃，如果是类，你应该使用。。

like this , you can select other elements also. if it is id you should use # and if it is class you should use ..

以下是使用 mouseenter a mouseleave > jQuery

follow is an example of using mouseenter an mouseleave using jQuery

$("#Hoverme").mouseenter(function(){
  $(this).css({"height":"auto"},1000); 
});


$("#Hoverme").mouseleave(function(){
  $(this).css({"height":"35px"},1000); 
});

div#Hoverme{
  width:100px;
  height:35px;
  overflow:hidden;
  }

ul li{
  list-style-type:none;
  cursor:pointer;
  background-color:orange;
  color:black;
  text-align:center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="Hoverme">
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
     <li>five</li>
     <li>six</li>
   </ul>
<div>

使用 mouseenter 和 mouseleave 的示例。这可以在各种各样，很好。得到的想法，适度适合你。

above is a simple example of using mouseenter and mouseleave. this can do in various and nicely. get the idea and moderate it that fit for you.

这篇关于如何将以下JS转换为JQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！