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

时间:2015-02-01 13:53:41

标签: javascript jquery

我正在学习使用jQuery的绳索,我正在尝试为简单的FizzBu​​zz游戏创建前端,我有如下函数...

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") );
    });
});

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

5 个答案:

答案 0 :(得分: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() ));
    });
});

答案 1 :(得分:0)

你可以尝试这样的事情 -

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

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

答案 2 :(得分:0)

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

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

parseInt(val1)

答案 3 :(得分:0)

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

比使用ids&#39;定义视图元素。或类,以便您以后可以选择它们:

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

<span id="outcome">??</span>

比你可以创建一个fizzBu​​zz对象而不是调用它的方法:

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

    });
});

答案 4 :(得分:0)

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

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