jQuery: 按下回车键时显示的内容

Question

我试图在单击按钮时显示一些内容（这与我的代码完美配合），但我也希望在按下回车键时也能显示这些内容。
控制台运行很好，错误是“getFigures could not be defined”，并且没有显示任何内容！我已经尝试了很多建议的不同方法，但仍然没有运气......如果有人能解决我哪里错了，那就太好了？

下面是我的代码，您可以在 link here:

中找到完整的代码

HTML:

    <section id="fetch">
         <input type="text" placeholder="Please enter your name here" id="term" />
         <button type = "button" id="search">ENTER</button>
    </section>

    <section id="content">
        <div id = "figures">
            <script>
            </script>
        </div>

        <div id ="name">
            <div id = "nameBox">
            </div>
            <div id = "nameText">
            </div>
        </div>

        <div id = "message">        
            <div id = "messageBox">
            </div>
            <div id = "greetingText">
            </div>
            <div id = "messageText">
            </div>
        </div>
    </section>

jQuery:

$('#search').click(displayContent);     // the value of the #term is being called within the displayContent();

$('#term').keyup(function(event){
   if(event.keyCode == 13){
       displayContent();
       getFigures();
   }
});

$('#term').keypress(function(event){        // this function looks redundant...?
    if(event.which == 13){
    $('#search').click(displayContent);
        displayContent();
        getFigures();
    }
});

非常感谢 :))) x

编辑： 我想要的更新 fiddle 是 here 供任何人参考:))) x

Answer 1

请检查：

https://jsfiddle.net/rokvowjv/8/

捕获 enter 密钥并加载内容只需要这么多代码。

$('#term').keyup(function (event) {
    if (event.keyCode == 13) {
        displayContent();
    }
});

此外，在测试时请在文本字段中输入 "Alexis"，然后按回车键。如果你这样做，那么即使 "FIGURES PRINTED" 也会在控制台中打印出来。

Answer 2

函数getFigures定义在函数displayContent的作用域内，不存在于该作用域之外。您尝试在 displayContent 范围之外的 $('#term').keypress(function (event)) 中调用 getFigures，因此 getFigures 不存在。

将 getFigures 放入 displayContent 函数中，它就可以工作了。

编辑： 您还需要将 type 变量作为属性添加到 getFigures 函数，以便您可以适当地传递它。

查看我的新 jsfiddle：https://jsfiddle.net/rokvowjv/12/

注意：你把#figuresdiv清空#contentdiv，我把图片加在内容而不是显示它，但我不确定这是否是您想要的。
您尝试将图像输出添加到数字 div，但由于您首先删除了 div，因此它不会起作用。

Answer 3

将 getFigures 放在 displayContent 之外，以便在调用 displayContent 时可用，并在 displayContent 中调用 getFigures(type)。fiddle here。请参阅控制台将显示输入的名称。

 var getFigures = function (type) {

        if (type == "mf") {

            $('#figures').prepend('<img src = "images/mf.png" height = "500px" width = "500px" />');
            console.log("mf found");

        } else if (type == "mm") {

            $('#figures').prepend('<img src = "images/mm.png" height = "500px" width = "500px" />');
            console.log("mm found");

        } else if (type == "ff") {

            $('#figures').prepend('<img src = "images/ff.png" height = "500px" width = "500px" />');
            console.log("ff found");

        }

    }

jQuery: 按下回车键时显示的内容

jQuery: content to show when enter key is pressed

html

jquery

enter