以循环方式使用jquery更改多个图像src

Question

我的 html 文件中有 3 个 img 标签。我想通过单击存储 9 个图像 src 链接的数组中的按钮来更改所有 3 个 img 的 src。

因此，当页面第一次加载时，它将显示前 3 张图像[0,1,2]。然后在每个 next-btn 单击它会将图像更改为下一个 3 [3,4,5]，[6,7,8]。当点击 prev-btn 时，它会返回 3 张图片。

请帮帮我。请建议我有没有其他方法（更好）？

这是我迄今为止尝试过的：

const $img1 = $("#img1")
const $img2 = $("#img2")
const $img3 = $("#img3")
const $nextBtn = $("#next-btn")
const $prevBtn = $("#prev-btn")


$.get("https://someApiLink.com/all.json", function (characters) {
    const charactersList = []
    for (let i=0; i<characters.length; i++) {
        // here casts is another array to match predefined characters with the 
        // character from the api
        if (casts.includes(characters[i].name)) {
            charactersList.push(characters[i])
        }
    } 
    $img1.attr("src", charactersList[0].image)
    $img2.attr("src", charactersList[1].image)
    $img3.attr("src", charactersList[2].image)

    // it will only switch back and forth 2 images on the first img tag     
    $nextBtn.on("click", function () {
        const src = ($img1.attr("src") === charactersList[0].image)
        ? charactersList[1].image
        : charactersList[0].image;
        $img1.attr("src", src)
    })
})

Answer 1

你需要两件事：

• 一个基于索引设置图像的函数。
• 一个索引，用于跟踪 charactersList 中从何处开始计数。

使用该功能，您可以根据 +1 和 +2 索引的起点呈现图像。所以假设你从 2 开始，那么 3 和 4 也会被渲染。

nextBtn 应该将索引增加 +3，以便渲染接下来的 3 张图像。 prevBtn 应该使用 -3 递减索引，以便渲染前 3 个图像。

const $img1 = $("#img1")
const $img2 = $("#img2")
const $img3 = $("#img3")
const $nextBtn = $("#next-btn")
const $prevBtn = $("#prev-btn")

$.get("https://someApiLink.com/all.json", function (characters) {
    const charactersList = []
    for (let i=0; i<characters.length; i++) {
        if (casts.includes(characters[i].name)) {
            charactersList.push(characters[i])
        }
    }

    // Index to start counting from.
    let characterIndex = 0;

    /**
     * Sets three images based in the given index.
     * Indexes will be counted upwards starting with the index.
     * @param {number} index
     */
    const setThreeImageFromIndex = index => {
        $img1.attr("src", charactersList[index].image)
        $img2.attr("src", charactersList[index + 1].image)
        $img3.attr("src", charactersList[index + 2].image)
    });

    // Set images for the first time.
    setThreeImageFromIndex(characterIndex);
    
    // Go to next 3.
    $nextBtn.on("click", function () {
       // Don't go over the length of the characterList.
       if (characterIndex + 3 < charactersList.length) {
           characterIndex += 3;
           setThreeImageFromIndex(characterIndex);
       }
    });

    // Go to previous 3.
    $prevBtn.on("click", function () {
       // Don't go below 0.
       if (characterIndex - 3 >= 0) {
           characterIndex -= 3;
           setThreeImageFromIndex(characterIndex);
       }
    });
})

Answer 2

您可以存储一种“页码”，例如 page，以跟踪它们所在的页面，并在每次“按下”时增加/减少它。

let page = 0;
const imgInSet = 3;

const reloadImages = ()=>{
    const imgSet = Math.abs(page); // we get abs if someone do more previous than nexts
    $img1.attr("src", characterList[imgSet*imgInSet].image); // get first image
    $img2.attr("src", characterList[imgSet*imgInSet+1].image); // get second image
    $img3.attr("src", characterList[imgSet*imgInSet+2].image); // get third image
}

$nextBtn.on("click", ()=>reloadImages(++page)); // do reloadImages after adding 1 to roll

$prevBtn.on("click", ()=>reloadImages(--page);) // do reloadImages after removing 1 from roll

您可以添加 numberOfPages 值来限制可用页面的数量，如下所示：

let page = 0;
const imgInSet = 3;
const numberOfPages = Math.floor(characterList.length/3);

const reloadImages = ()=>{
    const imgSet = Math.abs(page)%numberOfPages; // we get abs if someone do more previous than nexts
    $img1.attr("src", characterList[imgSet*imgInSet].image); // get first image
    $img2.attr("src", characterList[imgSet*imgInSet+1].image); // get second image
    $img3.attr("src", characterList[imgSet*imgInSet+2].image); // get third image
}

当它们到达负数时，这两个交换上一个/下一个按钮：

let page = 0;
const imgInSet = 3;
const numberOfPages = Math.floor(characterList.length/3);

const reloadImages = ()=>{
    const imgSet = page<0?numberOfPages+page%imgInSet:page)%numOfPages;
    $img1.attr("src", characterList[imgSet*imgInSet].image);
    $img2.attr("src", characterList[imgSet*imgInSet+1].image);
    $img3.attr("src", characterList[imgSet*imgInSet+2].image);
}

$nextBtn.on("click", ()=>reloadImages(++page));

$prevBtn.on("click", ()=>reloadImages(--page);)

此答案适用于更多“通用解决方案”，您无需对需要循环通过的每个新 img 进行太多更改。