Question

我正在尝试创建我的网站的一部分，客户可以“构建”自己的包，并选择5个项目的任意组合。

我有一组按钮，当点击它们时，将它们的值添加到一个Fieldset以及一个按钮，以便在它们被错误点击或改变主意时将其删除。

所有组件都运行正常，但我不知道如何将Fieldset限制为只有五个项目。有没有办法计算行数，然后停止接受输入五点之后还是五次寻找'删除'？

我仍然很擅长编码而不太确定什么是可能的。此输入最终将以表格形式提交。

这是我的Fiddle，以下是我尝试过的Javascript代码：

$(document).ready(function () {
    $(".buttons").click(function () {
        var intId = $().length + 1;
        var item = $(this).html();
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function () {
            $(this).parent().remove();
        });
        fieldWrapper.append(size);
        fieldWrapper.append(removeButton);
        $("#buildyourkit").append(fieldWrapper);
    });
});

Answer 1

这将为您提供添加到的当前元素数量。在添加新的之前，请确保仍有另一个空间。

$("fieldset .fieldwrapper").length

我已经分了你的fiddle。只需在向字段集添加新项目时查看控制台即可。

Answer 2

您可以拥有一个全局变量，如果每次添加字段时，如果超过5，则会计算并禁用所有按钮，每次删除字段时都会关闭并启用所有按钮。

另外，设置一个实时处理程序监听任何删除按钮，而不是创建一个新函数并为每个按钮绑定一个新的监听器，这样做更好一点，所以我演示了;但它不是强制性的（因为它只有5个元素，你的方式也有效）。

$(document).ready(function () {
    var buttonMaxID = 0;
    var buttonCount = 0;
    $('$buildyourkit').on('click', '.remove', function () {
        $(this).parent().remove();
        if (buttonCount-- >= 5) {
            $('.buttons').prop('disabled', false);
        }
    });
    $(".buttons").click(function () {
        if (++buttonCount >= 5) {
            $('.buttons').prop('disabled', true);
        }
        var item = $(this).html();
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + (buttonMaxId++) + "\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        fieldWrapper.append(size);
        fieldWrapper.append(removeButton);
        $("#buildyourkit").append(fieldWrapper);
    });
});

Answer 3

我建议设计一个管理器类来维护必须与UI交互的所有功能/方法。这允许您在一个位置定义数据集，并将UI绑定在一个位置。通过这样做，您可以使用更清晰的代码库，轻松重构并快速进行代码修改。此外，你得到了所有这些善良，没有任何全局变量，这是另一个很好的奖励。

代码确实看起来更大，但是一旦你理解了管理器的简单性，你就会看到我在上面概述的可能性。

$(document).ready(function () {
    //Create a new Kit Manager
    var kitManager = new KitManager();

    $(".buttons").click(function () {
        kitManager.add(this);
    });

    $(".report").click(function () {
        kitManager.getKit();
    });
});

function KitManager()
{
    //Static amount of items to return
    var MAX_ITEMS = 5;
    //Where the items should be visually displayed on the UI
    var kitLegend = $("#buildyourkit");
    //Internal array for storing the items added
    var items = []

    function add(element)
    {       
        if(items.length < MAX_ITEMS)
        {
            var itemNumber = items.length + 1;         
            var item = $(element).html();
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + itemNumber + "\"/>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />"); 

            //Add item to the array collection
            items.push(item);

            //Bind a remove function to the newly created button
            removeButton.click(function () {
                kitLegend[0].removeChild(fieldWrapper[0]);
                items.splice(itemNumber, 1); 
            });

            //Append UI components to container
            fieldWrapper.append(item).append(removeButton);

            //Append to main legend
            kitLegend.append(fieldWrapper); 
        }
        else
        {
            //Simple alert to user
            alert('You\'ve Reached The Maximum Number of Items');
        }
    }
    //Simple function for demonstration of a reporting feature
    //or potential method for returning the stored items
    function getKit()
    {
        for(var i=0,length=items.length;i <length;i++)
        {
            console.log(items[i]);
        }
    }

    //Expose public method call
    return {
        add:add,
        getKit: getKit
    };
}

http://jsfiddle.net/x97S5/

我希望您找到可接受的解决方案，如果您有任何其他问题，请询问。

有关所提议的解决方案和技术的更多信息，请查看Key Principles of Maintainable JavaScript

限制Fieldset中的输入

3 个答案: