Question

我正在浏览 Eloquent Javascript 这本书，我在其中一个练习中遇到了一些麻烦（我将所有练习都放在一个页面上，这不是问题的）。基本上它要求的是创建一个将通过字符串的函数，在该字符串中找到“B”的数量，并返回该数字。由于某种原因，它只返回0.函数本身很好，但我很难找到解决它的方法。

$(document).ready(function() {
    var text = $('#beaninput').val();
    function countBeans(string) {
        var beanCounter = 0;
        for (i = 0; i < string.length; i++) {
            if (string.charAt(i) == "B") {
                beanCounter += 1;
            };
        };
        return beanCounter;
    };
    $('#beanbutton').click(function() {
        $('#beanbot').empty();
        $('#beanbot').append(countBeans(text) + " Beans");
    });
});

作为参考，＃beaninput是一个HTML文本输入字段，＃beanbutton是一个按钮，应该在#beanbot中显示“B”的数量。

谢谢！

编辑：谢谢大家！工作得很好。

Answer 1

您的代码只会在＆＃34; ready＆＃34;期间获取文本字段的值一次。初始化。它应该在＆＃34;中点击＆＃34;处理程序。

将声明text变量的行移到＆＃34的开头;点击＆＃34;按钮的处理程序。

Answer 2

您应该在text事件处理程序中移动onClick作业：

$('#beanbutton').click(function() {
    var text = $('#beaninput').val();
    $('#beanbot').empty();
    $('#beanbot').append(countBeans(text) + " Beans");
});

Answer 3

您需要将var text = $('#beaninput').val();移至.click函数，否则其值将始终为0，即：

$(document).ready(function() {
    function countBeans(string) {
        var beanCounter = 0;
        for (i = 0; i < string.length; i++) {
            if (string.charAt(i) == "B") {
                beanCounter += 1;
            };
        };
        return beanCounter;
    };
    $('#beanbutton').click(function() {
         var text = $('#beaninput').val();
        $('#beanbot').empty();
        $('#beanbot').append(countBeans(text) + " Beans");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input id="beaninput">
<button id="beanbutton"> GO </button>
<p id="beanbot"></p>

Answer 4

在DOM-ready（DOMContentLoaded）事件触发时，输入值为空您应该在您想要处理它的位置读取值。

$(document).ready(function() {
  $('#beans').on("input", function() {
    var bees = this.value.match(/b/gi);
    $('output').val(bees ? bees.length : 0);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="beans" />
<output></output>

此解决方案使用String.prototype.match()（正则表达式）

为什么不提取字符串的值？

4 个答案: