javascript - 使用 jQuery 重置文本，存在 AJAX 调用

Question

我目前正在练习使用 jQuery 进行 Ajax 调用。用户输入一个国家，按下搜索按钮，然后对 API 进行 AJAX 调用。然后，用户会看到关于他们搜索的国家/地区的随机事实。 我的问题是我想让用户重置表单，然后事实自动消失。走到这一步，到了第二个国家，事实就不想再弹出来了。 我还应该提到我正在使用 css.animate 为页面上的一些元素设置动画。我想知道这是否会把事情搞砸。有人可以帮我从这里出去吗？我真的很想对这个简单的网站进行最后的润色。

这是我的 HTML:

<h1 class = "animated infinte bounce"> World Facts </h1>
    <div class = "info">
        <p> Enter in a country to get some information about it! </p>
            <form class = "zipform">
                <input type ="text" class = "pure-input-rounded">
                <button type = "submit" class = "pure_button"> Search </button>
                <input type="reset" value="Reset">
            </form>
            <div class = "world_facts">
                <p id = "region"> </p>
                <p id = "capital"> </p>
                <p id = "people"> </p>
                <p id = "nat_name"> </p>
                <p id = "domain"> </p>
            </div>
    </div>

还有我的 JS/jQuery:

`$('.pure_button').click(function(e) { 
e.preventDefault()
    console.log("click noticed")

$.ajax({


    url: //API URL HERE,
    type: "GET",
    success: function(data) {
        var country = $('.pure-input-rounded').val();
        console.log("This works too")
        debugger
        console.log(data)
        var capital = data[0].capital
        var people = data[0].demonym
        var region = data[0].region
        var nat_name = data[0].nativeName
        var domain = data[0].topLevelDomain
        $('.world_facts').addClass("animated fadeInDown")
        $('#region').text(country + " is located in " + region + ".")
        $('#capital').text("Its capital is " + capital + ".")
        $('#people').text("People from " + country + " are called " + people + ".")
        $('#nat_name').text(people + " people call their country " + nat_name + ".")
        $('#domain').text("Websites registered in " + country + " have the top level domain name of " + domain + ".")
    }
    });
});

$(":reset").click(function(e) {
    e.preventDefault()
        $(".zipform")[0].reset()
        console.log("Form reset")
        $(".world_facts").text("")

    });`

Answer 1

因为当你打电话

$(".world_facts").text("")

您正在删除所有子元素，因此它们不再存在。您需要从子项中删除文本。

$(".world_facts p").text("")