Question

我正在尝试使用jQuery来更改小应用程序中的图像。我正在使用带有click事件的锚标签。每次单击锚标记时，它都会更新html标记的部分以更新h1，p标记和图像。一切正常，除了图像没有被换掉。

这是我这个小项目的html：

<ul class="nav navbar-nav">
    <li><a id="chilledMandy">Chilled Mandy</a></li>
    <li><a id="cuteMandy">Cute Mandy</a></li>
</ul>

这是所有内容都得到更新的区域。

<div class="row">
        <div class="col-md-10 col-md-offset-1">

            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h1 id="title">The Many Different Profiles of Mandy Mangum</h1>
                </div>
                    <div id="profile">
                        <h1 id="profile-title">This is the title area.</h1>
                        <img id="profile-image" src="images/chilledmandy.png">
                        <p id="profile-paragraph">This is the bio area<p>
                    </div><!-- end #profile -->
                </div><!-- end .panel-heading -->
            </div><!-- end .panel -->
    </div><!-- end .col-md-10 -->
  </div> <!-- end row -->

这是我的JQuery脚本

    $(document).ready(function() {
        $('#chilledMandy').click(function() {
            var title = 'Chilled Mandy';
            var paragraph = "This is a photo of chilled Mandy.  She seems to be enjoying herself outside on her patio while smiling at the camera.";
            var image = '\images/chilledmandy.png';

            var profileTitle = document.getElementById('profile-title');
            var profileParagraph = document.getElementById('profile-paragraph');
            var profileImage = document.getElementById('profile-image');

            profileTitle.innerHTML = title;
            profileParagraph.innerHTML = paragraph;
            profileImage.attr('alt', "We are adding this because we can.");
        });

        $('#cuteMandy').click(function() {
            var title = 'Cute Mandy';
            var paragraph = "This is a photo of cute Mandy.  She seems to be out and about with a few of her friends at a local place here in Austin, Texas.  As usual, when she is with her friends, Mandy seems to be at her happiest.";
            var image = '\images/cutemandy.png';

            var profileTitle = document.getElementById('profile-title');
            var profileParagraph = document.getElementById('profile-paragraph');
            var profileImage = document.getElementById('profile-image');

            profileTitle.innerHTML = title;
            profileParagraph.innerHTML = paragraph;
            profileImage.attr('alt', 'We are going to change this in the next major upgrade.');
        });
    });

任何帮助都会很棒。

Answer 1

您永远不会将image放入src。此外，您在\字符串中还有一个image。

您正在使用jQuery方法更新DOM元素profileImage。

$(document).ready(function() {
    $('#chilledMandy').click(function() {
        var title = 'Chilled Mandy';
        var paragraph = "This is a photo of chilled Mandy.  She seems to be enjoying herself outside on her patio while smiling at the camera.";
        var image = 'images/chilledmandy.png';

        var profileTitle = document.getElementById('profile-title');
        var profileParagraph = document.getElementById('profile-paragraph');
        var profileImage = document.getElementById('profile-image');

        profileTitle.innerHTML = title;
        profileParagraph.innerHTML = paragraph;
        $(profileImage).attr({
            'alt': "We are adding this because we can.",
            'src': image
        });
    });

    $('#cuteMandy').click(function() {
        var title = 'Cute Mandy';
        var paragraph = "This is a photo of cute Mandy.  She seems to be out and about with a few of her friends at a local place here in Austin, Texas.  As usual, when she is with her friends, Mandy seems to be at her happiest.";
        var image = 'images/cutemandy.png';

        var profileTitle = document.getElementById('profile-title');
        var profileParagraph = document.getElementById('profile-paragraph');
        var profileImage = document.getElementById('profile-image');

        profileTitle.innerHTML = title;
        profileParagraph.innerHTML = paragraph;
        $(profileImage).attr({
            'alt': 'We are going to change this in the next major upgrade.',
            'src': image
        });
    });
});

使用jQuery更改src值无法正常工作

1 个答案: