单击后获得单击元素的问题

Question

我正在编写一个站点，通过使用它们api显示来自google-fonts的所有字体。我正在使用ajax获取这些字体，它们显示得很好，但是当我尝试将单击事件赋予所有p标记(每个标签包含一个字体)并通过using console.log($(this))在控制台中显示它们时，它会显示一些类似于ajax对象的内容。

$(() => {
    $(".press").click(() => {
        $.ajax({
            url: 'https://www.googleapis.com/webfonts/v1/webfonts?key=MyApiKey'
        }).done(function (response) {
            let items = response.items;
            for (var i = 0; i < items.length; i++) {
                const font = items[i];
                let fontFamily = font.family;
                $("div.fonts").append('<p class="font" id="'+i+'">'+fontFamily+'</p>');
                $("p#"+i).click(() => {
                    console.log($(this));
                });
                if (i === 723) {
                    const font = items[i];
                    let fontFamily = font.family;
                    let fontUrl = font.files.regular;
                    $("body").append("<style>@font-face {font-family: "+fontFamily+";src: url("+fontUrl+");}</style>")
                    let div = document.querySelector("#div5");
                    $("#div5").css("font-family", fontFamily);
                    break;
                }
            }
        }).fail(function (error) {
            console.log("Error: " + error);
        });
    });

});

Answer 1

有两个问题：

1. 您使用的是箭头函数，因此它在this上关闭，而不是根据调用的方式来设置它。对click处理程序使用传统函数。或者，如果您愿意的话，继续使用箭头函数，但是接受事件参数并使用它的currentTarget属性，这与this通常是一样的(连接事件的元素)。
2. 对段落使用无效的选择器。CSS ID选择器不能以数字开头。如果您使用像jQuery这样的纯ID选择器，那么#1可以让您不使用它，因为它优化了对getElementById调用的选择，但是当您执行像p#1这样的复合选择器时，它就失败了。在ID和ID选择器中添加一个前缀，比如x --或者更好的是，直接在p上查找事件处理程序，而不是再次查找它。

类似的内容(请参阅***注释)：

$(() => {

    $(".press").click(() => {
        $.ajax({
            url: 'https://www.googleapis.com/webfonts/v1/webfonts?key=MyApiKey'
        }).done(function (response) {
            let items = response.items;
            for (var i = 0; i < items.length; i++) {
                const font = items[i];
                let fontFamily = font.family;
                // *** Directly hook up the event handler, no need for the `id` attribute
                $('<p class="font">'+fontFamily+'</p>')
                    .click(function() { // *** Use a traditional function
                        console.log($(this));
                    })
                    .appendTo("div.fonts");
                if (i === 723) {
                    const font = items[i];
                    let fontFamily = font.family;
                    let fontUrl = font.files.regular;
                    $("body").append("<style>@font-face {font-family: "+fontFamily+";src: url("+fontUrl+");}</style>")
                    let div = document.querySelector("#div5");
                    $("#div5").css("font-family", fontFamily);
                    break;
                }
            }
        }).fail(function (error) {
            console.log("Error: " + error);
        });
    });

});

Answer 2

this似乎是在引用其他的东西。相反，我们可以将事件对象传递给我们的.click函数，以获取单击的元素，然后从那里获取currentTarget属性。

例如：

$("p#"+i).click((event) => {
   console.log(event.currentTarget);
});