Question

我正在学习使用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表单，它除了param (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") );
    });
});

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

Answer 1

您在加载时设置结果值。你需要捕获一些事件才能在用户提供值时运行游戏，例如你没有按钮，这就是你如何在键盘上进行操作：

$(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() ));
    });
});

Answer 2

你可以尝试这样的事情 -

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

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

Answer 3

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

你可能需要解析你的val1，因为它可能是一个字符串：

parseInt(val1)

Answer 4

只有在向现有原型添加功能时才应使用.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，而不是在视图中包含该文件。

比使用ids＆＃39;定义视图元素。或类，以便您以后可以选择它们：

<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.

    });
});

Answer 5

你快到了！您刚刚错过了填充函数中的return：

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

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

5 个答案: