javascript - jQuery + 测试元素值(扩展)

Question

因此，我正在编辑一个结构，它涉及一个名为 bulk 的 Javascript 对象。

我有它的功能(有一些错误)，但我觉得我做了太多的 DOM 操作。问题是用我的 jQuery 对值进行了硬编码。

我不会在这里发布所有代码，但只是我关心的:

(如果有兴趣，请在本 fiddle 中查看完整代码 - http://jsfiddle.net/G689t)

让我列出基本参数，这样才有意义:

• 您的容量为10。
• 当您选择 checkboxes 时，它会逻辑地识别哪些 checkbox 是负担得起的，并禁用那些不是。
• 如果 复选框 未选中，它还需要删除禁用状态。
• speed 计数器根据 1-4 的层将我们的总容量 改变 -/+ 1 .
• speed 和 capacity 需要为 UI 体验进行沟通。

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

有人可以根据我描述的值帮助将此过程统一为一个函数，用于检查/更新DOM吗？

• PC = Power Capacity (容量)
• speed = Angular 色的速度(speed)

这是我尝试过的一些代码(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');
    }
});

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

目标是编写一个函数来测试一些东西:

• 如果 bulk.pc 无法提供 checkbox['data-pc']，请将其禁用只要未检查。
• 如果 bulk.speed 为 1，则禁用 remSpeed 按钮
• 如果 bulk.speed 为 4，则禁用 addSpeed 按钮

(所有这些都有效，只需要知道如何将其组合成一个函数)

我在考虑一个switch case，它的参数很困难，但我希望有更好的选择。

(如果有兴趣，请在本 fiddle 中查看完整代码 - 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/