Question

我试图在鼠标悬停在现有图像上时淡入图像，而不为每个图像重写相同的功能。

目前我有：

<script type="text/javascript">

    $(document).ready(function() {

        $('.image').mouseenter(function() {  //fade in hover image
            $(this.getAttribute("name")).fadeIn(500);
        });                         
        $('.hoverimage').mouseout(function() { //fade out hover image
            $(this).fadeOut(500);
        });

    });

</script>

...
...

<!--base images-->
<img src="image1.png" class="image" name="hoverimage1">
<img src="image2.png" class="image" name="hoverimage2">
<img src="image3.png" class="image" name="hoverimage3">

<!--image to appear when hovering over-->
<img src="image1_glow.png" class="hoverimage" id="hoverimage1">
<img src="image2_glow.png" class="hoverimage" id="hoverimage2">
<img src="image3_glow.png" class="hoverimage" id="hoverimage3">

假设CSS已经存在，以便将悬停图像放在基本图像的顶部。我的代码试图做的是：

当鼠标进入“image1.png”的div时，它将获得名称属性“hoverimage1”
然后它通过基本上执行$（'＃hoverimage1“）淡化ID为”hoverimage1“的元素.fadeIn（500）;

但问题是name属性没有“＃”，我不想写“name =”＃hoverimage1“因为这会让ID感到困惑。现在我的函数执行$（'hoverimage1”） .fadeIn（500）;这是不正确的语法。

有人可以帮我吗？是否可以在“$（this.getAttribute（））”或其他内容中添加“＃”？

Answer 1

如果你想要前置#，那么你可以连接字符串：

$('#' + this.name)

但是如果可能的话，我会使用元素索引：

    $('.image').mouseenter(function() {
        $('.other_images').eq($(this).index()).stop().fadeIn(500);
    }).mouseout(function() {
        $('.other_images').eq($(this).index()).stop().fadeOut(500);
    });

这样，您甚至不需要在父图像的id属性中编写其他图像name。

Answer 2

由于属性为hoverimage1，因此脚本实际上在寻找<hoverimage1>元素。您需要将#连接到开头：$("#"+this.getAttribute("name"))

这个的正确语法是什么？

2 个答案: