如何实现Div点击跳转至JSON动态链接？JS开发求助

解决方案 #

你的代码核心问题是函数作用域错误，且未处理多新闻条目的动态渲染。以下是修复后的完整方案：

修复后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script>
</head>
<body>
    <div class="forex_news_container1">
        <!-- 用空容器承接动态生成的新闻 -->
        <div class="forex_news_containerAUD fxcontentNEWS" id="newsContainer"></div>
        
        <script>
            const newsApiUrl = 'https://api.npoint.io/b4841826d7668f639d10';

            // 加载并渲染新闻的核心函数
            async function renderNews() {
                try {
                    // 异步获取JSON数据
                    const response = await fetch(newsApiUrl);
                    const newsData = await response.json();

                    // 获取新闻容器元素
                    const container = document.getElementById('newsContainer');
                    container.innerHTML = ''; // 清空旧内容

                    // 遍历所有AUD新闻条目，动态生成DOM
                    newsData.AUD.forEach(newsItem => {
                        // 创建单个新闻卡片
                        const newsCard = document.createElement('div');
                        newsCard.className = 'yooo';
                        newsCard.style.cursor = 'pointer';
                        // 填充新闻内容（可根据需求调整）
                        newsCard.innerHTML = `
                            <h3>${newsItem.title}</h3>
                            <div class="news-meta">
                                <span>${newsItem.media}</span>
                                <span>${newsItem.date}</span>
                            </div>
                        `;
                        // 绑定点击跳转事件，直接使用当前条目的链接
                        newsCard.addEventListener('click', () => {
                            window.location.href = newsItem.link;
                        });
                        // 将卡片加入容器
                        container.appendChild(newsCard);
                    });
                } catch (err) {
                    console.error('新闻加载失败:', err);
                }
            }

            // 页面加载完成后自动执行渲染
            window.addEventListener('load', renderNews);
        </script>
    </div>

关键说明 #

1. 解决作用域问题：移除了inline onclick，改用addEventListener直接给生成的DOM绑定事件，避免全局找不到函数的错误。
2. 动态渲染所有条目：通过forEach遍历JSON中的所有新闻，自动生成对应Div，JSON更新后刷新页面就会同步显示新内容。
3. 错误处理：加入try/catch捕获请求或渲染失败的情况，方便调试。
4. 内容完整性：把新闻标题、来源、时间都渲染出来，更符合新闻展示的实际需求。

内容的提问来源于stack exchange，提问作者kie_codes