堆棧內存溢出
  簡體   English   中英

在懸停時獲取元素 ID

[英]Get element ID's on hovering

 原文  2020-12-13 16:31:17  9   2    javascript/ jquery/ animation/ events/ jquery-animate

問題描述

如果有人可以提供幫助，那就太好了。 我創建了一個動畫菜單。 唯一的問題是，在我的 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" alt="">
                <img id="bottom-2" class="toggle-2" src="button59.gif" alt="">
                <img id="top-2" class="toggle-2" src="button55.gif" alt="">
                <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 );
});

2 個解決方案

解決方案1
 0  2020-12-13 17:23:00

首先，對評論感到抱歉，我沒有意識到有法語，我改變了它們。

以下是我的腳本的工作方式： 按鈕包含 3 個圖像。 第一個在加載頁面時出現。 在 hover 上，它向右滑動，發現第二張圖像。 在這里，當鼠標離開按鈕時，第一個圖像回來，向左滑動，或者當單擊按鈕時，第二個圖像消失，發現第三個圖像。

第一個 hover 檢測按鈕的 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
 0  2020-12-14 04:23:31

 $(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]" alt=""> <img id="bottom-2" class="toggle-2" src="[button59.gif][1]" alt=""> <img id="top-2" class="toggle-2" src="[button55.gif][1]" alt=""> <span class="text-container">Buttonname2</span> </a> </div> </nav> </body> </html>

我找到了解決方案。 它只有一個問題。 單擊按鈕時，圖像會更改並打開新頁面。 但是，當我們通過單擊瀏覽器按鈕返回上一頁時，該按鈕不會返回到它的初始 state。 這意味着，當頂部圖像向右滑動時，它會顯示通常在單擊時顯示的圖像，而不是通過懸停顯示的圖像。

這是我的新腳本：

$(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);
            });
        });
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 獲取元素的 id 如何測試將鼠標懸停在鏈接上，如果是，則獲取元素的href 獲取元素的：hover大小，而無需實際懸停 將鼠標懸停在具有相同ID的另一個元素上時，jQuery會切換另一個ID的CSS 量角器：獲取Element的ID 獲取新添加的元素的ID DOM 獲取視口內的元素ID 獲取元素的 ID 並將其設置為變量 SignalR-獲取按鈕的元素ID 如何獲得被點擊元素的ID
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM