Javascript jQuery第n个子项仅选择第一个元素

我试图在

.article

的特定子项上添加一个点击功能，该功能将根据从请求中收到的

页面ID

显示某些

维基百科

链接。但是所有的

.article

都指向同一页

HTML:

<section id="body-article">
    <div id="body-container">

    </div>
</section>

function SendRequest(searchEntry){
    $.ajax({
        url: `https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=${searchEntry}`,
        type: 'GET',
        dataType: 'jsonp',
        headers: {'Api-User-Agent': 'WikiReader/0.1.0'}
      }).done(function(data, status) {
          console.log(data);
          GenerateArticle(data);
      }).fail(function(data, status) {
        console.log("ERROR! " + status);
      });
}

function GenerateArticle(data){
    //shows all the article in a div
    var totalArticleLength = data.query.search.length;
    for(var i=0;i<totalArticleLength;i++){
        var title= data.query.search[i].title;
        var pageid=data.query.search[i].pageid;
        var snippet=data.query.search[i].snippet;
        //responsible for showing single data
        CreateSingleArticle(title,pageid,snippet);
        // PROBLEM IS WITH THE BELOW LINE
        $(`.article:nth-child(${i+1})`).on("click",function(){
            window.open(`https://en.wikipedia.org/?curid=${pageid}`, 'Wikipedia', 'window settings');
        })
    }

}
function CreateSingleArticle(title,pageid,snippet){
    //creates a individual data
    html =
    `<div class="article">
        <div class="side-bar"></div>
        <div class="article-container">
            <div class="article-header">
                ${title}
            </div>
            <div class="snippet">
                ${snippet}
            </div>
        </div>
    </div>`
    $("#body-container").append(html);
}

JavaScript（jQuery）：

<section id="body-article">
    <div id="body-container">

    </div>
</section>

function SendRequest(searchEntry){
    $.ajax({
        url: `https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=${searchEntry}`,
        type: 'GET',
        dataType: 'jsonp',
        headers: {'Api-User-Agent': 'WikiReader/0.1.0'}
      }).done(function(data, status) {
          console.log(data);
          GenerateArticle(data);
      }).fail(function(data, status) {
        console.log("ERROR! " + status);
      });
}

function GenerateArticle(data){
    //shows all the article in a div
    var totalArticleLength = data.query.search.length;
    for(var i=0;i<totalArticleLength;i++){
        var title= data.query.search[i].title;
        var pageid=data.query.search[i].pageid;
        var snippet=data.query.search[i].snippet;
        //responsible for showing single data
        CreateSingleArticle(title,pageid,snippet);
        // PROBLEM IS WITH THE BELOW LINE
        $(`.article:nth-child(${i+1})`).on("click",function(){
            window.open(`https://en.wikipedia.org/?curid=${pageid}`, 'Wikipedia', 'window settings');
        })
    }

}
function CreateSingleArticle(title,pageid,snippet){
    //creates a individual data
    html =
    `<div class="article">
        <div class="side-bar"></div>
        <div class="article-container">
            <div class="article-header">
                ${title}
            </div>
            <div class="snippet">
                ${snippet}
            </div>
        </div>
    </div>`
    $("#body-container").append(html);
}

函数SendRequest（searchEntry）{
$.ajax({
网址：`https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=${searchEntry}`，
键入：“GET”，
数据类型：“jsonp”，
标题：{'Api-User-Agent'：'WikiReader/0.1.0'}
}).完成（功能（数据、状态）{
控制台日志（数据）；
生成文章（数据）；
}).失败（功能（数据、状态）{
日志（“错误！”+状态）；
});
}
函数生成器条目（数据）{
//在一个div中显示所有文章
var totalArticleLength=data.query.search.length；
对于（var i=0；i来说，答案非常简单。您遇到了javascript作用域问题。请查看即时函数调用。请阅读此处的更多信息

用于（var i=0；如果要查看更多信息：可以在循环中定义变量：@Sadikshyyaluintel:这是以前JS的解决方案。由于您使用的是模板文本，您还可以使用其他较新的功能，如
let i=0；
而不是
var i=0；
和闭包。请向所有投票人留言说明原因你否决了这篇文章。这有助于我提高自我。@Sadikshyyaluintel rock star Response是你应该更喜欢的新解决方案。我还没有意识到你正在使用新的ecmascript。通过范围界定，我认为不再需要
n个孩子
特定部分，因为
pageId
将在批准的范围内重新选择迭代行。只需使其在
上做出反应。单击文章。