Question

在下面的代码中，我希望在页面加载时显示第一个图像，但是，它没有显示任何内容，并且Firebug中没有错误。

如何让这条线工作：

$('img#main').attr('src', $('img:first').src);

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('jquery', '1.5');
            google.setOnLoadCallback(function() {

                $('img.thm').css({opacity: 0.7});
                $('img#main').attr('src', $('img:first').src); //doesn't work

                $('img.thm').width(80).click(function() {
                    $('img#main').attr('src', this.src);
                });
                $('img.thm').mouseover(function() {
                    $(this).css({opacity: 1.0});
                });
                $('img.thm').mouseout(function() {
                    $(this).css({opacity: 0.7});
                });
            });
        </script>
        <style type="text/css">
            img.thm {
                cursor: hand;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <img class="thm" src="images/test1.png"/>
            <img class="thm" src="images/test2.png"/>
            <img class="thm" src="images/test3.png"/>
        </div>
        <div id="content">
            <img id="main"/>
        </div>
    </body>
</html>

Answer 1

从.attr()获取jQuery对象的图像源时使用$('img:first')：

$('img#main').attr('src', $('img:first').attr('src'));

.src属性用于表示图像的DOM对象。你可以像这样使用它（见.get()）：

$('img#main').attr('src', $('img').get(0).src);

但为了保持一致，我会使用.attr()。

Answer 2

$('img').first().attr('src')

Answer 3

$('img#main').attr('src', $('img:first').attr('src'));

如何使用JQuery获取第一个图像的图像源？

3 个答案: