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

Question

我已经在jQuery中编码以下内容，以便让点击的图像显示在另一个位置但更大。只需要修改jquery代码。我知道我犯了一些错误，但在调试之后无法看到。此外，按钮还会检查是否单击了图像，并在符合条件时显示TEXT。

• 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;
    }
});

我希望这会对你有所帮助。