为什么我的 for 循环没有从我的对象数组中提取正确的数据?

Why is my for loop not pulling the correct data from my array of objects?

我已成功让 jQuery 从我的对象数组中加载 dividual 数据,但是当我尝试添加 jQuery 单击事件以启用切换功能时(将 div 的图像加载到更大的 'fullscreen' 视图中)它只加载最后一个数组项的数据。

我调用 allPictures 的对象数组示例:

var allPictures = [
    {
        name: "Elevated",
        number: 0,
        desc: "Hand Forged Steel Sculpture. Dimensions: 18\" diameter 16\” Height. Finish: Blue Opal, powdered pigment",
        tag: "Sculpt"
    },
    {
        name: "Paradise",
        number: 1,
        desc:"Hand Sculpted Auto Entry Gate. Material: Aluminum. Finish: Marine grade primer/Bronze Verde gre Faux/Hand Painted Bird of ParadiseFlowers",
        tag:"Metal"
    },
    {
        name: "Herculean Trellis",
        number: 2,
        desc:"Rose bush Trellis; Hand Forged. Material: Steel. Dimensions: 6’6”Hx3’9”W Weight: 340lbs. Finish: Bronze highlight rub/Bees wax",
        tag:"Metal"
    },
    {
        name: "Modern Cable Railing",
        number: 3,
        desc:"Exterior Stainless Steel Cable Railing. Material: 304 Stainless Steel structure/316 S.S. Cable hardware. Dimensions: 3’6”Hx3”Wx270 linear ft. Finish: Epoxy Primer/Polyurethane",
        tag:"Metal"
    }]

来自同一 JS 文件的相关 for 循环:

// on PORTFOLIO page, this code loops through ALL PICTURES WITHIN div's
for (i=0;i<allPictures.length;i++) {

    $imgNum = allPictures[i].number;
    $imgTitle = allPictures[i].name;
    $imgDesc = allPictures[i].desc;

    $newDIV = $('<div>');
    $newDIV.addClass("image-holder");
    $newDIV.attr("onclick","toggleView()");

    // create newPICTURE
    $newPICTURE = $('<img>');
    //Change the src using jQuery's attr method + the allPics number
    $newPICTURE.attr("src", `images/portfolio/img\ (${$imgNum}).jpg`);
    // append PIC to DIV
    $newDIV.append($newPICTURE);

    // creating infoOverlay
    $newOVERLAY = $('<div>');
    $newOVERLAY.addClass("info-overlay");
    $newOVERLAY.text(allPictures[i].name);
    $newDIV.append($newOVERLAY);

        // THIS is the function I'd like to change all the relevant info for the toggled fullscreen overlay
    $newDIV.click(function(){
            $('#centerpiece-img').attr('src',`images/portfolio/img\ (${$imgNum}).jpg`)
            $('#centerpiece-title').text($imgTitle);
            $('#centerpiece-desc').text($imgDesc);
        });

    // append DIV to container
    $('#art-display').append($newDIV);

}

我累了,这是我的第一个 post,很抱歉,如果我没有完美地格式化这个 post。

不同 script/js 文件上的切换视图方法 - toggle.js(这是 toggle.js 上的所有内容):

function toggleView() {
console.log('toggle.js connected')

// display OVERLAY
var viewerOverlay = document.getElementById('viewerOverlay');

if (viewerOverlay.style.display === 'none') {
    viewerOverlay.style.display = "block";
} else {
    viewerOverlay.style.display = "none";
}
}

function closeNav() {
    document.getElementById("viewerOverlay").style.display = "none";
}

this is a pic of it CORRECTLY loading the right image in the thumbnails

this is the image that loads when I click on "Elevate" (the 1st image)

编辑:添加了照片并更改了数组,希望能更好地传达我的问题。

EDIT2:添加了 toggleView() 方法

试试这个...我只是复制你的代码并修改代码..

// on PORTFOLIO page, this code loops through ALL PICTURES WITHIN div's
    for (i=0;i<allPictures.length;i++) {

    $imgNum = allPictures[i].number;
    $imgTitle = allPictures[i].name;
    $imgDesc = allPictures[i].desc;

    $newDIV = $('<div>');
        $newDIV.addClass("image-holder");
        $newDIV.attr("onclick","toggleView()");      
        $newDIV.attr("data-imagePath",`images/portfolio/img\ (${$imgNum}).jpg`);
        $newDIV.attr("data-imageTitle",$imgTitle);

        $newDIV.attr("data-imgDesc",$imgDesc);


    // create newPICTURE
    $newPICTURE = $('<img>');
        //Change the src using jQuery's attr method + the allPics number
        $newPICTURE.attr("src", `images/portfolio/img\ (${$imgNum}).jpg`);

        // append PIC to DIV
        $newDIV.append($newPICTURE);

    // creating infoOverlay
    $newOVERLAY = $('<div>');
        $newOVERLAY.addClass("info-overlay");

        $newOVERLAY.text(allPictures[i].name);

        $newDIV.append($newOVERLAY);

        // THIS is the function I'd like to change all the relevant info for the toggled fullscreen overlay
}

写在你的函数里

    function toggleView() {
        console.log('toggle.js connected')
    
    // display OVERLAY
    var viewerOverlay = document.getElementById('viewerOverlay');
    
    if (viewerOverlay.style.display === 'none') {


   imageData=$(this).data('imagePath');
   imageTitleData=$(this).data('imageTitle');
   imageDescData=$(this).data('imgDesc');
   $('#centerpiece-img').attr('src',imageData)
   $('#centerpiece-title').text(imageTitleData);
    $('#centerpiece-desc').text(imageDescData);
        viewerOverlay.style.display = "block";
    } else {
        viewerOverlay.style.display = "none";
    }
   }

尝试使用下面的代码,我们在 'newDIV' 上注释了第二个点击功能。我们仅使用 toggleView 函数来更新图像描述。

for (i=0;i<allPictures.length;i++) {

    $imgNum = allPictures[i].number;
    $imgTitle = allPictures[i].name;
    $imgDesc = allPictures[i].desc;
//adding image description as data-attr

    $newDIV = $(`<div data-imgnumber='${$imgNum}' data-desc='${$imgDesc}'  data-title='${$imgTitle}'>`); // Adding current iteration number
        $newDIV.addClass("image-holder");
        $newDIV.attr("onclick","toggleView()");

    // create newPICTURE
    $newPICTURE = $('<img>');
        //Change the src using jQuery's attr method + the allPics number
        $newPICTURE.attr("src", `images/portfolio/img\ (${$imgNum}).jpg`);

        // append PIC to DIV
        $newDIV.append($newPICTURE);

    // creating infoOverlay
    $newOVERLAY = $('<div>');
        $newOVERLAY.addClass("info-overlay");

        $newOVERLAY.text(allPictures[i].name);

        $newDIV.append($newOVERLAY);

        // THIS is the function I'd like to change all the relevant info for the toggled fullscreen overlay

/*
As are showing selected image data in toggleView function so, REMOVE THIS CODE
        $newDIV.click(function(){
            $('#centerpiece-img').attr('src',`images/portfolio/img\ (${$imgNum}).jpg`)
            $('#centerpiece-title').text($imgTitle);
            $('#centerpiece-desc').text($imgDesc);
        });
*/
    // append DIV to container
    $('#art-display').append($newDIV);

}

这是您更新的 toggleView 函数

function toggleView() {
    console.log('toggle.js connected')

    // display OVERLAY
    var viewerOverlay = document.getElementById('viewerOverlay');

    if (viewerOverlay.style.display === 'none') {

    // Here we are updating selected image data in bigger div
        $('#centerpiece-img').attr('src',`images/portfolio/img\ (${this.getAttribute("data-imgnumber")}).jpg`)
        $('#centerpiece-title').text(this.getAttribute("data-title"));
        $('#centerpiece-desc').text(this.getAttribute("data-desc"));


        viewerOverlay.style.display = "block";
    } else {
        viewerOverlay.style.display = "none";
    }
}