限制字段​​集中的輸入

Question

我試圖在網上商店中創建一個部分，客戶可以在其中“構建”自己的捆綁軟件並選擇5種商品的任意組合。

我有一組按鈕，當單擊它們時，會將它們的值添加到Fieldset中，並添加一個按鈕以將其刪除，以防萬一他們誤單擊或改變了主意。

所有組件都可以正常工作，但是我不知道如何將Fieldset限制為僅五個項目。 有沒有一種方法可以計算行數，然后在五點之后停止接受輸入，或者尋找五次“刪除”？

我對編碼還很陌生，不太確定有什么可能。 此輸入將最終以表格形式提交。

這是我的小提琴 ，下面是我嘗試過的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

我把你的小提琴分叉了。 在向字段集中添加新項目時，只需查看控制台即可。

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/

希望您認為該解決方案可以接受，如果還有其他問題，請詢問。

有關建議的解決方案和技術的更多信息，請查看可維護JavaScript的關鍵原理。