在悬停时获取元素 ID

Posted 2023-05-08

技术标签:

【中文标题】在悬停时获取元素 ID【英文标题】：Get element ID's on hovering 【发布时间】：2021-03-24 10:33:54 【问题描述】：

如果有人可以提供帮助，那就太好了。我创建了一个动画菜单。唯一的问题是，在我的 JS 中，我为所有五个按钮重复了我的代码。我试图从每个 html 元素中获取 id，以优化我的脚本，但它不起作用。请帮忙。这是我的代码：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="html/js/jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <nav>
        <div class="button-container">
            <a id="link-1" class="link" onclick="location='page1.html'; return false" href="http://Buttonname1">
                <!-- Image apparaissant au clic -->
                <img id="bottom-1-clicked" class="toggle-1" src="button58.gif">
                <!-- Image apparaissant au survol après disparition de l'image d'origine -->
                <img id="bottom-1" class="toggle-1" src="button59.gif">
                <!-- Image apparaissant au chargement de la page. Glisse vers la droite au survol puiq revient vers la gauche -->
                <img id="top-1" class="toggle-1" src="button55.gif">
                <span class="text-container">Buttonname1</span>
            </a>
        </div>
        <div class="button-container">
            <a id="link-2" class="link" onclick="location='page2.html'; return false" href="http://Buttonname2">
                <img id="bottom-2-clicked" class="toggle-2" src="button58.gif" >
                <img id="bottom-2" class="toggle-2" src="button59.gif" >
                <img id="top-2" class="toggle-2" src="button55.gif" >
                <span class="text-container">Buttonname2</span>
            </a>
        </div>      
    </nav>
</body>
</html>

这是我的 JS：

    $(document).ready(function()
        setInterval(function()  
        $('.link').hover(function(childs) 
            // Hovering the menu item, the first image slides to the right, discovering another image
            $(this.id).hover(function()
                $(":nth-child(3)", this).attr('id').stop(true, false).animate( left: 130 , 300);
            );
            // On mouse leave, the image slides back to the left
            $(this.id).mouseleave(function()
                $(":nth-child(3)", this).attr('id').stop(true, false).animate( left: 0 , 300);
            );
            // On click, the image changes, displaying a third image
            $(this.id).mousedown(function()
                $(":nth-child(2)", this).attr('id').hide(50);
                $(":nth-child(1)", this).attr('id').show(50);
            );
        );
    , 300 );
);

【问题讨论】：

你应该用英文写你的cmets，这样更多的人会明白您的代码似乎很混乱。每 300 毫秒，您将绑定另一个 hover 事件处理程序，它本身还有 3 个其他事件处理程序，包括另一个 hover 处理程序。我不确定您的目标到底是什么，但我可以告诉您，现在的逻辑是不正确的，并且您获取元素的 id 的请求不相关，因为这不是代码的编写方式.您能否编辑问题以包含所有相关的 HTML 和 CSS 以及您的目标描述。在 Rory 的 cmets 上扩展，使用 $(this.id) 省略了 id 选择器所需的 "#" 前缀，等效于 $('link-1')，它正在寻找元素 <link-1></link-1>。你的代码充满了问题使代码可在 sn-p 中运行。 【参考方案1】：

首先，对不起 cmets，我没有意识到有法语，我改变了他们。

我的脚本是这样工作的：按钮包含 3 个图像。第一个在加载页面时出现。悬停时，它向右滑动，发现第二张图像。在这里，当鼠标离开按钮时，第一个图像返回，向左滑动，或者当单击按钮时，第二个图像消失，发现第三个图像。

第一次悬停检测按钮的ID。

这是 CSS：

* 
    box-sizing: border-box;

nav 
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 194px;
    overflow: hidden;

.button-container 
    display: block;
    position: relative;
    height: 39px;
   
.text-container 
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    margin: auto;
    top: 50%;
    font: 12px arial;
    font-weight: bold;
    color: #990099;
    transform: translate(0, -65%);
    vertical-align: middle;
    text-align: center;
       
.text-container:hover 
    color: #000000;

.text-container:active 
    color: #990099;

.toggle-1 
    position: absolute;
    top: 0;
    left: 0;

.toggle-2 
    position: absolute;
    top: 0;
    left: 0;

【讨论】：

【参考方案2】：

$(document).ready(function() 
  $(".link").mouseover(function() 
    // Hovering the menu item, the first image slides to the right, discovering another image
    $(":nth-child(3)", this).stop(true, false).animate(
      left: 300
    , 
      easing: "linear"
    , 300);

    // On mouse leave, the image slides back to the left
    $("#" + this.id).mouseleave(function() 
      $(":nth-child(3)", this).stop(true, false).animate(
        left: 0
      , 
        easing: "linear"
      , 300);
    );

    // On click, the image changes, displaying a third image
    $("#" + this.id).mousedown(function() 
      $(":nth-child(2)", this).hide(50);
      $(":nth-child(1)", this).show(50);
    );
  );
);

* 
  box-sizing: border-box;


nav 
  position: absolute;
  top: 0;
  left: 0;
  width: 130px;
  height: 194px;
  overflow: hidden;


.button-container 
  display: block;
  position: relative;
  height: 39px;


.text-container 
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
  top: 50%;
  font: 12px arial;
  font-weight: bold;
  color: #990099;
  transform: translate(0, -65%);
  vertical-align: middle;
  text-align: center;


.text-container:hover 
  color: #000000;


.text-container:active 
  color: #990099;


.toggle-1 
  position: absolute;
  top: 0;
  left: 0;


.toggle-2 
  position: absolute;
  top: 0;
  left: 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="menu.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <nav>
    <div class="button-container">
      <a id="link-1" class="link" onclick="location='page1.html'; return false" href="http://Buttonname1">
        <!-- Image appearing on click -->
        <img id="bottom-1-clicked" class="toggle-1" src="[button58.gif][1]">
        <!-- Image appearing on hover, after the upper one disappears -->
        <img id="bottom-1" class="toggle-1" src="[button59.gif][1]">
        <!-- Image appearing when the page is loaded. The images slides to the right on  hover and slides to the left when mouse leaves it -->
        <img id="top-1" class="toggle-1" src="[button55.gif][1]">
        <span class="text-container">Buttonname1</span>
      </a>
    </div>
    <div class="button-container">
      <a id="link-2" class="link" onclick="location='page2.html'; return false" href="http://Buttonname2">
        <img id="bottom-2-clicked" class="toggle-2" src="[button58.gif][1]" >
        <img id="bottom-2" class="toggle-2" src="[button59.gif][1]" >
        <img id="top-2" class="toggle-2" src="[button55.gif][1]" >
        <span class="text-container">Buttonname2</span>
      </a>
    </div>
  </nav>
</body>

</html>

我找到了解决方案。它只有一个问题。单击按钮时，图像会更改并打开新页面。但是，当我们通过单击浏览器的按钮返回上一页时，按钮不会返回到它的初始状态。这意味着，当顶部图像向右滑动时，它会显示通常在单击时显示的图像，而不是通过悬停显示的图像。

这是我的新脚本：

$(document).ready(function()
        $(".link").mouseover(function() 
            // Hovering the menu item, the first image slides to the right, discovering another image
            $(":nth-child(3)", this).stop(true, false).animate( left: 300 ,  easing: "linear" , 300);
            
            // On mouse leave, the image slides back to the left
            $("#"+this.id).mouseleave(function()
                $(":nth-child(3)", this).stop(true, false).animate( left: 0 ,  easing: "linear" , 300);
            );
        
             // On click, the image changes, displaying a third image
            $("#"+this.id).mousedown(function()
                $(":nth-child(2)", this).hide(50);
                $(":nth-child(1)", this).show(50);
            );
        );
);

【讨论】：

以上是关于在悬停时获取元素 ID的主要内容，如果未能解决你的问题，请参考以下文章

如何在 DIV 中获取元素名称和 ID 的类型

获取 MouseLeave 事件后鼠标悬停的第一个元素