Question

我有一个快速的问题，我需要帮助，并希望一组新的眼睛能够指出我的问题。我有一个照片库，我想在点击时显示缩略图的更大图像。缩略图图像在底部显示正常，但不可点击，主要（或更大的图像）不显示。我正在使用外部.js文件。我也会上传HTML，也许有人可以指出我正确的方向并帮助我理解我所忽略的内容。

<!doctype html>

<html>


<head>
    <title>Photo Gallery Final Project</title>
    <meta charset = "UTF-8">
    <link rel = "stylesheet" href = "gallery.css">


</head>

<body>

    <div class = "main">

        <div class = "wrapper">

            <div id = "largeImage">

        <img src = "images/machine_1_big.jpg" alt = "machining image" width = "920" height = "400" id = "myImage" class = "border"/>

            </div>

            <div class = "thumbnail">

              <img src="machine_1.jpg" alt = "machining lathe"   id="machine_1"/>
              <img src="machine_2.jpg" alt = "machining lathe" id="machine_2"/>
              <img src="machine_3.jpg" alt = "machining lathe"  id="machine_3"/>
              <img src="machine_4.jpg" alt = "machining lathe"  id="machine_4"/>
              <img src="machine_5.jpg" alt = "machining lathe"  id="machine_5"/>
              <img src="machine_6.jpg" alt = "machining lathe"  id="machine_6"/>

            </div>
        </div>
    </div>

    <script src = "gallery.js"></script>


</body>




</html>

//this will load the gallery in the browser and enable the gallery function
//window.onload = gallery;
//gallery funtion declared
function gallery(){
     //variable allGalleryImages created. This is where all the images will be held
     var allGalleryImages = document.images;
     //for loop declared for the image array
     for(var i = 0; i < allGalleryImages.length; i++){
          if(allGalleryImages[i].id.indexOf("small") > -1){
              //this will add a listener to the thumb images
               allGalleryImages[i].onclick = imgChanger;

          }
     }
}
//this is the image changer function
function imgChanger(){
     //this will change the src attribute value of the large image.
     //document.getElementById('myImage').src ="images/"+this.id+"_big.jpg";
      document.getElementById('myImage').src =  " " + this.id +"_big.jpg";

}

Answer 1

我使用了JQuery。没有必要更改您的HTML。并且没有理由制作所有缩略图的数组。

$(document).ready(function() {
    $(".thumbnail img").on("click", function() {
        imgChanger($(this).attr("src"));
    })


    //this is the image changer function
    function imgChanger(theSRC) {
        //this will change the src attribute value of the large image.
        //document.getElementById('myImage').src ="images/"+this.id+"_big.jpg";
        var beforeJPG = theSRC;
        console.log(beforeJPG);
        beforeJPG = beforeJPG.substring(0, beforeJPG.length-4);
        console.log(beforeJPG + "_big.jpg");
        $("myImage").attr("src", beforeJPG + "_big.jpg");
    }
})

小提琴：https://jsfiddle.net/6v8arhp2/

获取所点击图片的src
切断＆＃34; .jpg＆＃34;
添加＆＃34;图片/＆＃34;在前面，添加＆＃34; _big.jpg＆＃34;到后面
更改#myImage

**当然你的图片不在JSFiddle中，所以你看不到它的工作，但是控制台日志显示了转换。

JS照相馆。获取要显示的大图像和缩略图可点击

1 个答案: