如何传递参数 jQuery 并返回函数值

how to pass an argument jquery and return the function value

本文关键字：返回 函数 jQuery 何传递 参数      更新时间：2023-09-26

我只是在学习jQuery的绳索，我正在尝试为一个简单的FizzBuzz游戏创建前端，我有一个如下功能...

FizzBuzz.prototype.play = function(number){
    if (this.isDivisibleByFifteen(number)) {
        return "FizzBuzz";
    }
    else if (this.isDivisibleByThree(number)) {
        return "Fizz"; 
    }
    else if (this.isDivisibleByFive(number)) {
        return "Buzz";
    }
    else {
        return number;
    }
}

我希望有一个 html 表单，它不包括参数(number)并在 span 容器中返回结果......

<form id="game">
      <input type="text" name = "text" placeholder="Type your number"/>
</form>
<span id="outcome">??</span>```

这是我目前所拥有的，随心所欲地撕开...

$(document).ready(function() {
    $("#outcome").text(function() {
        fizzBuzz.play( $(this).attr("number") );
    });
});

显然，这没有考虑表单中的任何输入，但还不确定如何做到这一点。 非常感谢。

您正在设置加载时的结果值。您需要捕获一些事件才能在用户提供值时运行游戏，例如，由于您没有按钮，以下是在键向上时执行此操作的方法：

$(document).ready(function() {
    $("#game input[name=text]").keyup(function() {
        $('#outcome').text(fizzBuzz.play( this.value ));
    });
});

或者，如果您想在用户按回车键（即提交表单）时运行游戏：

$(document).ready(function() {
    $("#game").submit(function() {
        $('#outcome').text(fizzBuzz.play( $('input[name=text]', this).val() ));
    });
});
仅当

向现有原型添加功能时，才应使用 .prototype。

所以你首先必须定义一个原型：

function fizzBuzz(){
// here you can define properties and methods (such as play method)
};

如有必要，您可以添加新功能 

fizzBuzz.prototype.play = function(number){
    if (this.isDivisibleByFifteen(number)) {
        return "FizzBuzz";
    }
    else if (this.isDivisibleByThree(number)) {
        return "Fizz"; 
    }
    else if (this.isDivisibleByFive(number)) {
        return "Buzz";
    }
    else {
        return number;
    }
}

您应该在新的javascript文件上定义fizzBuzz，然后将该文件包含在您的视图中。

然后使用 id' 或类定义视图元素，以便以后可以选择它们：

<form id="game">
      <input type="text" id="number" name = "text" placeholder="Type your number"/>
</form>
<span id="outcome">??</span>

比你可以创建一个fizzBuzz的对象，然后调用它的方法：

$(document).ready(function() {
    var myGame = new fizzBuzz();
    $("#number").change(function() {
        var number = $(this).val(); // get the number from text element
        // you probably want to validate if $(this).val() is a number.
        var result = myGame.play(number); 
        $("#outcome").text(result); // set the text of outcome = result.
    });
});

 var val1 = $("#game").find('.game').val(); #you need a class="game" for this in your input html
   $("#outcome").text(var1);

您可能需要解析 val1，因为它可能以字符串形式传递：

parseInt(val1)

你可以试试这样的东西——

$('#game').on('submit', function(e){
  e.preventDefault();
  var requiredText = fizzBuzz.play( $(this).find("input").val() );
  $('#outcome').text(requiredText);
})

从那以后，您已经创建了一个表单。您需要在输入字段中输入任何值，然后按 Enter 键。

你快到了！您刚刚错过了填充功能中的一个return：

$(document).ready(function() {
    $("#outcome").text(function() {
        return fizzBuzz.play( $(this).attr("number") );
    });
});
相关文章：