Question

我试图在单击按钮时显示一些内容（它与我的代码完美配合），但我也希望在按下回车键时显示它。
控制台运行良好，错误为“ getFigures无法定义”并且未显示任何内容！我已经尝试了很多不同的方法，但仍然没有运气......如果有人能解决我在哪里放错了会很好吗？

以下是我的代码，您可以在链接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

编辑：我想要的更新小提琴here供任何人参考:)））x

Answer 1

请检查：

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

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

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

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

Answer 2

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

将getFigures放在displayContent功能之外，它可以正常工作。

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

请参阅我的新jsfiddle：https://jsfiddle.net/rokvowjv/12/

注意：您通过清空#figures div来删除#content div，我在内容中添加图片而不是显示它，但我不确定是否是你想要的。
您试图将图像输出添加到数字div，但是因为您首先删除了div，所以它不起作用。

Answer 3

在getFigures之外displayContent，以便在拨打电话时可以使用，并在getFigures(type)。fiddle here中拨打displayContent。请参阅控制台它会显示输入的名称。

 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：按下回车键时显示的内容

3 个答案: