Question

我有一个从JSON对象获得的书籍的字符串对象。此Book对象具有三个Key值对，Title，Author和URL。我使用for循环来读取每个对象，并将对象的标题作为按钮放在html页面上。但是当点击按钮时，我希望警告书的URL。当我读取对象时，我创建了Books对象并将其推入数组供以后使用。但我无法使用.Click（）方法URL不对。请参阅代码以便更好地理解。： - ）

for (i = 0; i < 6; i++) //I know that there is only 65 Books..jsonString.books.lenght is not working.
{
    var title = jsonString.books[i].title;
    var classname = title.replace(/\s/g, "");
    var author = jsonString.books[i].author;
    var URL = jsonString.books[i].url;
    var htmlString = '<div class="' + classname + '"><input type="button" value="' + title + '"></div>';
    $(htmlString).appendTo(attachPoint).click(function () {
        loadBook(URL);
    });

    OneBook = new Book(author, title, URL);
    arr.push(OneBook);
}

attachpoint是我从

获取的html文件中的引用

var attachpoint=document.querySelector('.buttonAttachPoint');

所以在上面的代码中，我点击的URL始终是jsonString中的最后一个对象。这发生在for循环中。那么有没有办法可以获得具有onclick或按钮标题的Div的类名，以便我可以从我创建的对象数组中获取URL？或者有一种更简单的方法。任何人都可以指出为什么“jsonString.books.lenght”不起作用？在此先感谢.-)所有的帮助非常感谢。： - ）

Answer 1

使用立即调用的函数表达式创建闭包应该可以解决问题。只需替换它：

$(htmlString).appendTo(attachPoint).click(function () {
    loadBook(URL);
});

用这个：

(function(URL) {
    $(htmlString).appendTo(attachPoint).click(function () {
        loadBook(URL);
    });
})(URL);

在该匿名函数范围内的

URL将传递给它的值，这将是for循环的迭代的正确值。

Answer 2

在ECMAScript中，变量的范围是它们的功能，而不是任何块。

绑定到click的函数在整个循环的上下文中有URL的闭包，而不是在循环迭代的上下文中超过URL。

这意味着无论何时调用任何函数，URL都将具有循环将其设置为的最后一个值。

您需要为每个循环冻结URL的值。一种方法是在其他地方使用URL作为参数，并返回一个关闭它的函数，因此：

function getBookLoader(url) {
  return function (){
    loadBook(url);
  };
}

然后，您可以使用以下内容替换... .click行：

$(htmlString).appendTo(attachPoint).click(getBookLoader(URL))

要回答标题中的问题，事件的target属性包含调度事件的对象，currentTarget属性包含当前正在评估其侦听器的对象。 currentTarget应该是有问题的div。

找到.click函数的类

2 个答案: