单击图像时显示大图像的 jQuery 单击事件

Question

我在 jQuery 中编写了以下代码，以便让单击的图像显示在另一个位置但更大。只需要修改 jquery 代码。我知道我犯了一些错误，但调试后看不到哪里。还有一个按钮检查图像是否被单击，并在满足条件时显示文本。

• Code to be reviewed - had problems pasting all code here
• jsFiddle

HTML

<div id="question">
    <h2>jQuery Vacation Images</h2>
    <p>What is your first name?
    <input type="text" id="firstname" size="30">
    <span></span>
    </p>
</div>

<div id="vacationimages">
    <p>Click on the Image that best represents the kind of vacation you want</p>
    <p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
    <p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
    <p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>

<div id="bigimage">
    <img id="currentimage" src="ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
    <p id="imagedesc"></p>
</div>

<div id="showhidebuttondiv">
    <input id="showhidebutton" type="button" value="Hide Image">
</div>


<div id="submitdiv">
    <input id="submitme" type="button" value="Submit ME">
    <p id="mymessage"></p>
</div>

JS

$(document).ready(function() {
    $("#vacationimages img").click(function()  {
        var changeSrc = $(this).attr("src");
        var changeAlt = $(this).attr("alt");
            $("#currentimg").attr("src", changeSrc); //code to show large clicked image on the right
            $("#imagedesc").text(changeAlt);        //code to show alt under the large image in text
    }); //end of vacation mouse click verification

    $("#submitme").click(function () {
        $("#question span").text("");
        $("#mymessage").text("");
        var myname = $("#firstname").val();
          if (myname == '')  {
            $("#question span").text("Must enter first name");
            return;
          }
        $("#vacationimages img").click(function()  {
            var changeAlt = $(this).attr("alt");
            $(this).data('clicked', true);
            if (myname !== "" || $("#vacationimages img").data('clicked'))
            {
                $("#mymessage").text(myname + " you want a " + changeAlt + " vacation"); //if image clicked and name is set this message will show under the "Submit Me" button
            }
        }) //end of Name Verification for empty field

    })   //end of Submit Me button handler

})  // END OF READY

Answer 1

看看这个 DEMO ，在这里我用固定的解决方案更新了你的 jsFiddle 。我对你的源代码做了一些修改，你看一下:

$("#vacationimages img").click(function () {
    var changeSrc = $(this).attr("src");
    var changeAlt = $(this).attr("alt");
    $("#bigimage img").attr("src", changeSrc); //code to show large clicked image on the right
    $("#imagedesc").text(changeAlt);        //code to show alt under the large image in text
    var changeAlt = $(this).attr("alt");
    $(this).data('clicked', true);
    var myname = $("#firstname").val();
    if (myname !== "" || $("#vacationimages img").data('clicked')) {
        $("#mymessage").text(myname + " you want a " + changeAlt + " vacation"); //if image clicked and name is set this message will show under the "Submit Me" button
    }
}); //end of vacation mouse click verification
$("#submitme").click(function () {
    $("#question span").text("");
    $("#mymessage").text("");
    var myname = $("#firstname").val();
    if (myname == '') {
        $("#question span").text("Must enter first name");
        return;
    }
});

希望这对您有更多帮助。