Question

如果我的英语不好，你好，很抱歉..

我正在研究Jquery 4/5天，我正试图在我制作的页面中使用它。我正在尝试创建一个非常简单的动画，其中id = #opacity的图像的某些属性随鼠标悬停而变化，然后通过mouseleave恢复正常。

现在..使用另一个#id作为选择器，在这种情况下（#p），当鼠标结束时，每个图像都能正常工作，改变其不透明度。如果我擦除另一个选择器只是第一个图像工作而其他图像不工作。可能这是一个愚蠢的问题，但我是jQuery的新手。

非常感谢。

$(document).ready(function(){
        animazione();
    });

    function animazione() {

    var opacity = $('#opacity, #p');

    opacity.mouseover(function(){
        $(this).animate({
            opacity: '1.0',
        },350).mouseleave(function(){
            $(this).animate({
                opacity: '0.6',
            },200);
        });
    });
    }

这里有带图像的html部分。

<div class="container_5">
        <div class="grid_1">
            <a href="#">
                <img src="img/monitor.png" id="opacity" alt="monitor" class="ambits" style="margin-top: 80px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/rulli.png" id="opacity" alt="rulli" class="ambits" style="margin-top: 75px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/lucchetto.png" id="opacity" alt="lucchetto" class="ambits" style="margin-top: 100px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/cuore.png" id="opacity" alt="cuore" class="ambits" style="margin-top: 100px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/allest.png" id="opacity" alt="allestimento" class="ambits" style="margin-top: 90px;">
            </a>
        </div>
    </div>

Answer 1

HTML元素的id属性为该特定元素定义了唯一标识符，因此页面上每个id属性的值必须是唯一的。您不能拥有id="opacity"的多个元素，因为它是无效的HTML。

当你使用$('#opacity')时，jQuery在内部使用本机JavaScript document.getElementById()函数，它只选择一个具有指定id的元素（通常是DOM中的第一个，但是我我不确定是否有保证。

如果您想要将元素组合在一起并同时与它们进行交互，请改用class。

animate的问题分别应用于id选择的每个元素

1 个答案: