Question

我看过其他此类问题，但都没有解决我的问题。我有以下JavaScript代码：

var count1;
for (count1 = 1; count1 < 11; count1++) {
  var article = res.articles[count1]
  var ImageURL = res.articles[count1].urlToImage
  $('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3 <p>' + article.description + '<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
  $("#" + count1).css('background-image', 'url(' + ImageURL + ')');
  x = article.url;
}

function divLoad() {
  alert(article.url);
};

基本上有10个项目的不同文章。变量的范围都是正确的。当我在循环中进行控制台登录时，可以看到项目的链接。我想每当单击每个项目的相应按钮时提醒每个URL。但是当我单击该按钮时，出现错误：

未捕获的ReferenceError：未定义divLoad 在HTMLButtonElement.onclick

我想念什么吗？

编辑[我的完整代码]：

var x;
function divLoad() {
alert(x);
};
$(document).ready(function(){
    var url = 'https://newsapi.org/v2/top-headlines?country='+country+'&apiKey=MYAPIKEY';
    $.getJSON(url).then(function(res){
        //console.log(res)
        var count1;
        for(count1 = 1; count1 < 11; count1++){
            var article = res.articles[count1]
            var ImageURL = res.articles[count1].urlToImage
            x = article.url;
            $('#showNews').append('<div id="'+count1+'" class="article"><div class="overlayart"><div class="art"><h3>'+article.title+'</h3><p>'+article.description+'<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
            $("#"+count1).css('background-image','url(' + ImageURL + ')');

        }


    });

Answer 1

问题是您总是引用一个全局变量。该变量（x仅保留在for循环中设置的最后一个值。

相反，我们可以在文章后面附加data attribute，这样，我们就可以将每个元素与特定的文章网址相关联。

function divLoad(url) {
  alert(url);
};

$(document).ready(function() {
    var url = 'https://newsapi.org/v2/top-headlines?country=' + "test" + '&apiKey=MYAPIKEY';
    $.getJSON(url).then(function(res) {
        for (let count1 = 1; count1 < 11; count1++) {
            let article = res.articles[count1];
            $('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3><p>' + article.description + '<br><br><button class="article-btn">Follow Link</button></p></div></div></div>');
            $("#" + count1)
              .css("background-image", "url('" + article.urlToImage + "'")
              .attr("data-url", article.url); //Associate the URL to the element
        }
    });

    $("#showNews").on("click", ".article-btn", function() {
        var url = $(this).closest(".article").attr("data-url"); //Get the associated URL
        divLoad(url);
    });
});

如果现在检查<div class="article">，您会看到每个人都有一个data-url属性，该属性保存其URL。

未捕获的ReferenceError：在HTMLButtonElement.onclick中未定义

1 个答案: