Question

我是javascript / jquery的初学者，无法弄清楚为什么我无法获取所单击按钮的文本。当我console.log(this)时，它返回按钮文本。但是，我无法检索该值以传递到单击处理程序中的queryURL中。对不起这个基本问题，我们将不胜感激。

        var topics = ["boardwalk empire", "sopranos", "the wire", "billions", "entourage", "dexter", "breaking bad", "better call saul", "dark", "black mirror",]
        var baseURL = "http://api.giphy.com/v1/gifs/search?q="
        var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
        
        for (var e = 0; e < topics.length; e++) {
            var button = $("<button>").text(topics[e]);
            button.addClass("btn-primary");
            $(".show-buttons").append(button);

            button.on("click",function (){
            var input = $(this).val()
            console.log(this)
            var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
            $.ajax({
                url: queryURL,
                method: "GET"
            }).then(function (response) {
                console.log(response.data);
                console.log(queryURL);
            });
        });

        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    <title>Document</title>

</head>

<body>
    <div class="container">
        <h1>gifTastic!</h1>
        <label for="search-field">Find a TV Show: </label>
        <input type="text" id="search-field">
        <input id="find-giphy" class="btn-primary" type="submit" value="giphy Search">
        <div class="show-buttons"></div>
        <div class="show-gifs"></div>

    </div>

Answer 1

将btn点击功能修改为：

button.on("click",function (){
            var input = $(this).text();   // .text() can be used to set and get text

为什么我无法获得此按钮的文字（名称）？

1 个答案: