点击“a”标签为图像点击 api

Question

所以基本上我现在正在点击 api 来获取特定品种的图像.. 当您点击 json 中图像的 api 时，您会得到类似的结果

网址：“https://cdn2.thecatapi.com/images/dLrzJVXo1.jpg”

并且我想显示该图像，但我只是不确定如何让该特定品种在点击时显示该猫图像。

正在使用的 API 是：https://docs.thecatapi.com/

我也真的只想要一个品种，并且图像一次显示在页面上，这样您就可以说单击以转到下一个图像或返回到最后一个图像，并且可能添加一个按钮来单击并显示所有品种，您可以点击查看品种名称列表。

这是我的代码目前的样子，是的，我想保留需求的类部分，它只是在列表中显示项目，但由于某种原因，它是一个大的 A 标签 LI，它们没有分开。

Javascript：

    // const catPictures = document.getElementById("catBreeds");


class CatBreed {
    constructor(breed) {
        this.breeds = [];
    }
    static async fetchCat(url) {
        try {
            const response = await fetch(url);
            const data = await response.json();
            console.log('Here is that cat info you asked for: ', data)
            data.map(cat => console.log('here is an individual cat: ', cat))
            return data;
        } catch (error) {
            return error;
        }
    }
    static async onLoad(url) {
        const catData = await this.fetchCat(url);
        const catContainer = document.getElementById("catList");
        const catLinks = catData.map((cat) => {
            const link = document.createElement('li');
            link.innerHTML = cat.name
            console.log(link)
            return catContainer.appendChild(link);
        });
    }

    static async fetchCatImage(url) {
        try {
            const response = await fetch(url);
            const catImage = await response.json();
            console.log('test', catImage)
            return catImage;
        } catch (error) {
            return error;
        }
    }
};

CatBreed.onLoad('https://api.thecatapi.com/v1/breeds')
CatBreed.fetchCatImage('https://api.thecatapi.com/v1/images/search?breed_id=tvan')

// catPictures.addEventListener('click', async () => {
//     const catData = await CatBreed.fetchCat('https://api.thecatapi.com/v1/breeds');
//     const catContainer = document.getElementById("catList");
//     const catLinks = catData.map((cat) => {
//         const link = document.createElement('li');
//         link.innerHTML = cat.link
//         console.log(link)
//         return catContainer.appendChild(link);
//     });
// });

HTML：

<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div class="mainContainer">
      <div class="catContainer">
        <h1>Cat Api</h1>
        <p>Click to view some pictures of that specific breed</p>
        <ul class="catList">

        </ul>
      </div>
    </div>
    <script src="script/index.js"></script>
  </body>
</html>

Answer 1

JS 文件：

var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = x.length }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block";
    }

    class CatBreed {
        constructor(breed) {
            this.breeds = [];
        }
        static async fetchCat(url) {
            try {
                const response = await fetch(url);
                const data = await response.json();
                console.log('Here is that cat info you asked for: ', data)
                data.map(cat => console.log('here is an individual cat: ', cat))
                return data;
            } catch (error) {
                return error;
            }
        }
        static onLoad(url) {
            const catData = this.fetchCat(url);
            const catContainer = document.getElementById("catBreeds");
            const catLinks = catData.map((cat) => {
                const link = document.createElement('li');
                link.innerHTML = cat.name
                console.log(link)
                return catContainer.appendChild(link);
            });
        }

        static async fetchCatImage(url) {
            const catImg = await this.fetchCat(url);
            const catImgContainer = document.getElementById("catImg");
            const catImgLink = catImg.map((cat) => {
                catImgContainer.src = cat.url;
            });
        }
    };

    CatBreed.fetchCatImage('https://api.thecatapi.com/v1/images/search?breed_id=tvan')

    var btnSearch = document.getElementById("btnShowAll");
    btnSearch.onclick = function () {
        CatBreed.onLoad('https://api.thecatapi.com/v1/breeds')
    }

CSS：

.mySlides {
    display: none;
}

img {
    width: 200px !important;
    height: 200px;
}

HTML

<div class="mainContainer">
    <div class="catContainer">
        <h1>Cat Api</h1>
        <p>Click to view some pictures of that specific breed</p>
        <div class="w3-content w3-display-container" style="width: 200px; margin-left: 0px">
            <img class="mySlides" id="catImg" style="width:100%">
            <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <ul class="catList">
            <li id="catListing">
                <a href="" id="catBreeds"></a>
            </li>
        </ul>
    </div>
</div>
<br />
<button id="btnShowAll">Show All</button>

抱歉，我可以获取此链接https://api.thecatapi.com/v1/breeds 的数据。有些在我的本地机器上受到保护。