jquery将所有src更改为rel

时间:2014-06-08 21:39:51

标签: jquery html image rel

我试图将鼠标悬停在图像上,并将所有图像转换为我将鼠标悬停在一个图像上。我已经完成了。

当我鼠标移动时,我希望图像恢复正常,我无法解决这个问题。

我试图使用rel选择器,但是在我现在的解决方案中,当我将所有图像鼠标移出时,取下第一张图像的相对而不是一切恢复正常。

这是我的HTML

<div id="container">
        <header id="masthead"><h1>Swap All</h1></header>
        <div id="stage">
            <div id="gallery">
                <img class="photo" rel="_images/image1.jpeg"  src="_images/image1.jpeg"  />
                <img class="photo" rel="_images/image2.jpeg"  src="_images/image2.jpeg"   />
                <img class="photo" rel="_images/image3.jpeg"  src="_images/image3.jpeg"   />


        </div>

这是我的JS

    function grabIt(){

        var thisImageSrc = this.src;

        $('.photo').attr('src', thisImageSrc);



    }


    function letItGo() {

        var theRel = $('.photo').attr('rel');

        $('#gallery img').attr( 'src', theRel);

        console.log(theRel);
    }


        $('.photo').mouseover(grabIt);
        $('.photo').mouseout(letItGo);

1 个答案:

答案 0 :(得分:3)

试试这个:

function letItGo() {
    $('#gallery img').each(function() {
        //option#1: pure JS
        this.src = this.rel;
        //option#2: jQuery (I'll leave this in as an option because the OP used this himself and might prefer it even though it is not necessary)
        $(this).attr('src',$(this).attr('rel'));
    });
}

要明确:你只需要一个选项;如果你想使用纯JS,请从代码中删除选项#2。反之亦然。


您尝试的内容并不起作用,因为您只将第一张照片的rel-tag存储到var theRel中。即使有更多匹配的元素,此行var theRel = $('#gallery img').attr('rel');也只会选择第一个匹配。

我的代码遍历所有匹配的元素,并且对于每个元素,它使用自己的rel-tag来更改自己的src-tag,使用this / $(this)