单击后获取被单击元素的问题

Question

我正在编写一个网站，使用 api 显示 google-fonts 中的所有字体。我正在使用 ajax 获取这些字体并且它们显示良好，但是当我尝试为所有 p 标签（每个标签包含一种字体）提供点击事件并通过 using console.log($(this)) 在控制台中显示它们时它显示看起来像 ajax object.

的东西

$(() => {
    $(".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

有两个问题：

您使用的是箭头函数，因此它关闭 this 而不是通过调用方式设置它。使用传统函数代替 click 处理程序。或者，如果您愿意，继续使用箭头函数但接受事件参数并使用它的 currentTarget 属性，这与 this 通常是相同的（您挂钩的元素事件）。
您使用的段落选择器无效。 CSS ID 选择器不能以数字开头。如果您使用 #1 这样的纯 ID 选择器，jQuery 可以让您摆脱它，因为它会将其优化为 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);
});

单击后获取被单击元素的问题

Problem with getting clicked element after click

javascript

ajax

jquery

google-font-api