Question

我试图从jquery点击功能调用javascript函数但不能这样做。

这是我的代码。

 OnSubmit: function(){
            $("#problemsubmit").click(function(){
                var value = $("#probleminput").val();
                $('#prob_submit_mssg').text(value);
                $("#probleminput").val('');
                this.checkAnswer();
            });
        },

并尝试从块中调用以下函数

checkAnswer:function(){
             console.log($('#prob_submit_mssg').text());
             if($('#prob_submit_mssg').text() == this.qsAns){
                    console.log("TRUE");
             }
        },

下面是我的html / css文件

<!DOCTYPE html>
<html>
<head>
    <title>Impact Game</title>
    <style type="text/css">
        html,body {
            background-color: #333;
            color: #fff;
            font-family: helvetica, arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 12pt;
        }
        #problemform {
            display: none;
            width: 300px;
            height: 100px;
        }
        #probleminput {
            position: absolute;
            display: none;
            top: 450px;
            left: 240px;
            height: 50px;
            width: 350px;
        }
        #problemsubmit {
            position: absolute;
            display: none;
            top: 530px;
            left: 623px;
            height: 40px;
            width: 100px;
            padding: 5px 10px 8px 2px;
        }
        #prob_submit_msg {
            width: 30%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        #canvaswrapper {
            position: relative;
            height: 768px;
            width: 1024px;
            display: block;
            margin: auto;
            margin-top: 80px;
            vertical-align: middle;

        }
        #canvas {

            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

    </style>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/impact/impact.js"></script>
    <script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<div id="canvaswrapper">
        <canvas id="canvas" width="1024" height="768"></canvas>
    <div id="problemform" class="form-inline">
        <input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
        <button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
                <a id='testop' ></a>
    </div>
        <div id ="prob_submit_mssg" style="display: block;"></div>
</div>
<script>
</script>
</body>
</html>

我想要做的是在用户点击提交按钮时触发检查事件。检查这个的唯一方法是在.click函数块内，但是当我在这个块中调用this.checkAnswer（）时它不会被调用但是当我在块外调用它时它会被调用但是我不想这样。有没有办法在单击提交按钮时调用函数或设置变量？

Answer 1

问题是this引用。事件处理程序中的this引用了单击的dom元素，而不是包含checkAnswer方法的对象。

最简单的解决方案之一是使用闭包变量来保存OnSubmit中的对象引用，然后在click处理程序中使用该对象引用来调用对象中的所需方法，如下所示。

OnSubmit: function () {
    var self = this;
    $("#problemsubmit").click(function () {
        var value = $("#probleminput").val();
        $('#prob_submit_mssg').text(value);
        $("#probleminput").val('');
        self.checkAnswer();
    });
},

Answer 2

问题在于范围界定。在JavaScript中，“this”的值是你告诉它的，你正在处理jQuery，所以你不能选择。 JavaScript不像您最常用的对象那样工作。完成此任务的最佳方法是在窗口级别创建要在变量或对象内部调用的函数（同样命名函数也不是一个坏主意）。例如：

window.namespace_util = {
    checkAnswer: function() {
         console.log($('#prob_submit_mssg').text());
         if($('#prob_submit_mssg').text() == this.qsAns){
                console.log("TRUE");
         }
    },
}

在窗口范围内的变量中定义了检查答案功能后，您可以这样调用它：

OnSubmit: function(){
    $("#problemsubmit").click(function(){
        var value = $("#probleminput").val();
        $('#prob_submit_mssg').text(value);
        $("#probleminput").val('');
            window.namespace_util.checkAnswer();
    });
},

您不必在窗口范围内声明此方法，但底线是您无法可靠地使用关键字“this”来引用您在其中的任何父对象。我知道这可能令人困惑，我不想深入了解原因和方法。只要知道使用JavaScript，关键字“this”就没有表现出你对经典OOP的期望，并且为了调用你需要完全限定呼叫的方法。

Answer 3

这里的问题是当你执行$("#problemsubmit")时，它不会返回HTMLElement，而是返回一个自定义jQuery数组（在这种情况下只有1个索引，因为它是一个ID选择器）。但是，jQuery provides a way要获得您想要的基础HTMLElement，请尝试以下方法：

$("#problemsubmit").click(function(){
    var value = $("#probleminput").val();
    $('#prob_submit_mssg').text(value);
    $("#probleminput").val('');
    this.get(0).checkAnswer();
});

希望这有帮助。

从jquery click函数中调用一个函数

3 个答案: