Question

我有一个小的jQuery脚本，我希望根据对三个选择元素的更改动态地将div添加到我页面中的某个部分。

我的php：

<!DOCTYPE html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>

<body>

    <div>

        <select class="food_counter" id="food_counter1" name="Fruit">
            <option selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>            
        </select>

        <select class="food_counter" id="food_counter2" name="Vegetable">
            <option selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>            
        </select>

        <select class="food_counter" id="food_counter3" name="Dairy">
            <option selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>            
        </select>       

    </div>

    <section id="foods">
        <h2>My Food</h2>
    </section

</body>

我的js：

$(function() {

    $('.food_counter').change(function() {

        n = $('.food_counter').length;

        clearAll();

        for(i=0; i < n; i++) {

            var selector = i + 1;
            var currentOption = $('#food_counter' + selector.toString());
            var currentValue = $('#food_counter' + selector.toString() + ' option:selected').text();
            var multiplier = parseInt(currentValue);

            for(j=0; j < multiplier; j++) {
                addNewSelectors(currentOption.attr("name"));
            }

        }


    });

});

function clearAll() {
    $('.new_food').remove();
}

function addNewSelectors(id) {

    var options = ["One", "Two", "Three"];

    $('#foods').append("<div class='new_food'><p>" + id + "</p><select>");

    for(i=0; i < options.length; i++) {
        $('#foods select').append($("<option/>").attr("value", i).text(options[i]));
    }   

    $('#foods').append("</select></div>");

}

我的js脚本中的外部for循环似乎表现得很奇怪。如果我将计数器food_counter1更改为2，则表明其行为正确 - 将两个div添加到#foods。

但是，如果我尝试将food_counter1更改为1，将food_counter2更改为2，则只会将Fruit的单个实例附加到#foods，而不是三个div（水果，蔬菜，蔬菜）。

仔细观察后，似乎我的外部for循环只运行一次，尽管n总是为3.奇怪的是，如果我重置了将change函数触发为0的计数器，循环将继续跑。

知道这里发生了什么吗？

Answer 1

for循环中使用的变量“i”没有特别定义，只是简单使用，因此被认为是“全局”。要修复它，您可以将for循环重写为：

for(var i=0; i < n; i++) { ...

然后在你的addNewSelectors里面，比如

for(var i=0; i < options.length; i++) {...

这将在块/函数的本地范围内声明i。

jQuery for循环只运行一次尽管条件

1 个答案: