jQuery + 测试元素值（扩展）

Question

所以，我正在编辑一个结构，其中涉及一个名为 bulk 的 Javascript Object。

我有它的功能（有一些错误），但我觉得我做了太多DOM 操作。问题是我的jQuery 的值硬编码。

我不会在这里发布所有代码，只发布我关心的内容：

（如果有兴趣，请查看此小提琴中的完整代码 - http://jsfiddle.net/G689t）

让我列出基本参数，这样就有意义了：

• 您有一个 capacity 或 10。
• 当您选择 checkboxes 时，它会从逻辑上确定哪些 checkbox 是负担得起的，并禁用那些不是负担得起的。
• 如果checkbox未选中，它还需要删除disabled 状态。
• speed 计数器根据 1-4 的层级将我们的总数 capacity 更改为 -/+ 1。
• speed 和 capacity 需要为 UI 体验进行交流。

我已经写了一个 function 来完成这个，但我只是觉得我的代码对 DOM 的操作太多了。

有人可以根据我描述的值将这个过程统一成一个单一的function 以检查/更新DOM吗？

• PC = 电源容量（容量）
• 速度 = 人物速度（速度）

这是我尝试过的一些代码（JS）：

数据结构：

var bulk = {
    speed: 1,
    damage: 0,
    type: 'P',
    statEf: [],
    health: 0,
    minion: [0],
    pc: 10,
    exp: 9000
};

尝试的函数

// CORE UPDATE FUNCTION FOR VALUES / DISABLE / ENABLE
$(':checkbox, input[type="button"]').on('click', function() {
    if(bulk.pc <= 1){
        $('#addSpeed').attr('disabled', 'disabled');
        $('#remSpeed').removeAttr('disabled');
    } else if(bulk.speed > 2){
        $('#remSpeed').removeAttr('disabled');
    }
    if(bulk.pc <= 1 && bulk.pc !== 4){
        $('#remSpeed').removeAttr('disabled');
        $('#addSpeed').removeAttr('disabled');
    }
});

我应该继续运行这个并测试每个value，然后将它扔到我以后的functions，还是有更简单的方法来完成这个？

目标是编写一个函数来测试一些事情：

• 如果bulk.pc 无法提供checkbox['data-pc']，请禁用它只要它不是checked。
• 如果bulk.speed 为1，请禁用remSpeed 按钮
• 如果bulk.speed 为4，请禁用addSpeed 按钮

（所有这些都可以工作，只需要知道如何将它们组合成一个函数）

我在想switch case 和困难的parameters，但我希望有更好的选择。

（如果有兴趣，请在此小提琴中查看完整代码 - http://jsfiddle.net/G689t）

PS：我希望有人可以看看 fiddle 并轻松将其合并为一个函数

值/禁用/启用。

Answer 1

经过深思熟虑（和一夜的休息），我想出了一个主 DOM 函数，它似乎可以完美地工作。

真的很遗憾我没有早点考虑。我遇到的问题是将所有内容映射到if / else if / else 语句。因此，如果其中一个测试返回有效，它就会产生错误并且不会触发所有测试。

事不宜迟，解决办法是：

完整代码在这里：http://jsfiddle.net/ZBGLb/1/

function updateDom(){
    if(bulk.pc < 1 || bulk.speed >= 4){
        $('#addSpeed').attr('disabled', 'disabled');
    }
    if(bulk.speed <= 1){
        $('#remSpeed').attr('disabled', 'disabled');
    }
    if(bulk.speed > 1){
        $('#remSpeed').removeAttr('disabled');
    }
    if(bulk.speed < 4 && bulk.pc > 0){
        $('#addSpeed').removeAttr('disabled');
    }
    $(":checkbox").each(function() {
        if($(this).data('pc') > bulk.pc && $(this).prop('checked')==false){
            $(this).attr('disabled', 'disabled');
        } else if ($(this).data('pc') <= bulk.pc) {
            $(this).removeAttr('disabled');
        }
    });
    for (var key in bulk) {
        $('#' + key).text(bulk[key]);
    };
}

为了详细说明它的使用方式，对于每个函数，我只是在可能发生变化的适当调用期间运行 updateDom() 函数。

// ADD SPEED FUNCTION
$('#addSpeed').on('click', function() {
    bulk.speed += 1;
    bulk.pc -= 1;
    updateDom();
});

// REDUCE SPEED FUNCTION
$('#remSpeed').on('click', function() {
    bulk.speed -= 1;
    bulk.pc += 1;
    updateDom();
});

现在我的数据结构正常工作，我可以编写其余代码来操作 object，而无需考虑散布在我的代码中的 DOM Manipulation 的静态值。

完整代码在这里：http://jsfiddle.net/ZBGLb/1/