Question

我正在处理一个基于用户输入创建HTML代码的表单，我在使用某些javascript功能时遇到了一些问题。除非需要，否则我希望隐藏表单的某些部分（例如，如果用户想要为他们编码的特殊瓶子添加折扣，则会显示隐藏的折扣字段。）

以下是我以前使用的一些代码，用于隐藏或显示div（＃rebatebs1），具体取决于是否在单选按钮上选择了特定值（name =“bottlespecial1rebate”）：

    hidebottlespecial1Rebate = function () {
        $('#rebatebs1').hide();
    };

    bottlespecial1RebateSelection = function () {
        hidebottlespecial1Rebate();

        switch ($(this).val()) {
            case 'yes':
                $('#rebatebs1').show();
            break;
            case 'no':
                $('#rebatebs1').hide();
            break;
        }
    };


    $(function() {

        $('input[name=bottlespecial1rebate]:radio').change(bottlespecial1RebateSelection);

        bottlespecial1RebateSelection.apply($('input[name=bottlespecial1rebate]:radio'));
    });

我的问题是我有12种不同的radiobutton / div组合，我想将这些代码应用到12次而不是复制/粘贴它并每次更改选择器（例如＃rebatebs2＆amp;＃bottlespecial2rebate，＃rebatebs3＆amp; ;＃bottlespecial3rebate等。

我尝试编写一个for循环用一个变量代替数字，但我不太了解javascript（我是一个自学成才的新手）让它工作，不幸的是。如果有人能指出我正确的方向让它适用于12个不同的单选按钮/ div组合，我真的很感激。

Answer 1

将您的HTML更改为，此处您可以在自定义数据中 data-related-div - *属性

<input type="radio" name="bottlespecial1rebate" value="yes" 
    data-related-div="rebate1">Yes<br>
<input type="radio" name="bottlespecial1rebate" value="no" 
    data-related-div="rebate1">No

HTML

您可以使用Attribute Starts With Selector [name^="value"]绑定事件，例如

$('input:radio[name^="bottlespecial"]').change(bottlespecial1RebateSelection);

您可以使用.data()

来存储使用HTML显示/隐藏的div

bottlespecial1RebateSelection = function () {
    var relatedDiv = "#" + $(this).data('related-div');
    switch ($(this).val()) {
        case 'yes':
            $(relatedDiv).show();
        break;
        case 'no':
            $(relatedDiv).hide();
        break;
    }
};

Fiddle DEMO

Answer 2

快速而肮脏的方式就是这样

var ids = ['list', 'of', 'radio', 'button', 'id'];

for (var i in ids) {
    (function(ids[i]){
        var el = $('#'+id);
        var bottlespecial1RebateSelection = function() {
            el.hide();

            switch ($(this).val()) {
                case 'yes':
                    el.show();
                break;
                case 'no':
                    el.hide();
                break;
            }
        }
        el.change(bottlespecial1RebateSelection);
        bottlespecial1RebateSelection.apply(el);
    })(id)
}

唯一特殊的东西是for循环，因为你在for循环中生成函数（非常不鼓励），你需要使用自执行函数来保留i的值。这通常称为infamous loop javascript问题

但是，如果你打算长期使用Javascript，知道这种东西可能是有益的，因为在某些特殊情况下，在for循环中生成函数会为你节省大量的时间

Answer 3

要检测所有单选按钮的更改，您可以先将单选按钮包装在div元素中，并为其指定bottlespecialrebates这样的唯一ID：

$(document).on("change","#bottlespecialrebates input:radio", function(){
    bottlespecial1RebateSelection.apply($(this));
});

或只使用一种属性contains选择器（使用^=符号）：

$(document).on("change","input[name^=bottlespecial]:radio", function(){
    bottlespecial1RebateSelection.apply($(this));
});

重点是添加更改侦听器的方式。

使用Javascript循环检测类似单选按钮中的更改，然后执行代码

3 个答案: