Question

简短版
我有两种形式。一个带收音机按钮，一个带下拉键（选择）两者都具有相同的结构。例如，如果单选按钮的值发生变化，则下拉对应项应更改为相同的值。

限制：
每个无线电和选择的ID和name属性是随机的。后端将生成一些随机值。所以我无法使用它们。凌乱，我知道。但我无法改变这一点唯一不会改变的是CSS级。

这是我已经得到的：
我给每个select和每个单个单选按钮提供了一个清除值的类：

// All Mobile Selects
var $mobRechnung = $mobile.find('.js-notification-set--rechnung'),
    $mobJahr = $mobile.find('.js-notification-set--jahr'),
    $mobMonat = $mobile.find('.js-notification-set--monat'),
    $mobErinnerung = $mobile.find('.js-notification-set--erinnerung');

// All Desktop Radios
var $deskRechnungBrief = $desktop.find('js-notification-set--rechnung-brief'),
    $deskRechnungMail = $desktop.find('js-notification-set--rechnung-mail'),

    $deskJahrBrief = $desktop.find('js-notification-set--jahr-brief'),
    $deskJahrMail = $desktop.find('js-notification-set--jahr-mail'),
    $deskJahrNo = $desktop.find('js-notification-set--jahr-no'),

    $deskMonatMail = $desktop.find('js-notification-set--monat-mail'),
    $deskMonatSMS = $desktop.find('js-notification-set--monat-sms'),
    $deskMonatNo = $desktop.find('js-notification-set--monat-no'),

    $deskErinnerungMail = $desktop.find('js-notification-set--erinnerung-mail'),
    $deskErinnerungSMS = $desktop.find('js-notification-set--erinnerung-sms'),
    $deskErinnerungNo = $desktop.find('js-notification-set--erinnerung-no');

如您所见，我无法合并单选按钮，因为我无法使用他们的name。所以我需要给每个单独的值分隔它们。

然后我想我把它们放在Arrays中，用jQuery .map()循环它们，但现在我被卡住了。我不知道如何继续使用代码继续编写小说......

如果您需要更多代码，请与我们联系。

修改HTML标记：
桌面代码示例。每一行都是相同的。

<div class="js-notification-set--desk>
   {# Rechnung Row #}
        <div class="row">
            <fieldset>
                <legend class="col-sm-3">Rechnung</legend>

                {# Brief Radio #}
                <div class="mod-formelem col-sm-1">
                    <input type="radio" id="__radio1__" name="__row1__" class="js-notification-set--rechnung-brief" aria-labelledby="__sr01__"/>
                    <label for="__radio1__" class="mod-formelem--icon" aria-hidden="true"></label>
                </div>

                {# E-Mail Radio #}
                <div class="mod-formelem col-sm-1">
                    <input type="radio" id="__radio2__" name="__row1__" class="js-notification-set--rechnung-mail" checked="checked"
                           aria-labelledby="__sr02__"/>
                    <label for="__radio2__" class="mod-formelem--icon" aria-hidden="true"></label>
                </div>
            </fieldset>
        </div>
(...)
     </div>

注意：aria-labelledby声明每个单选按钮的标签。按钮位于表格网格中，标签位于表格的顶部。所以没有定向链接标签。

移动选择示例：

<div class="js-notification-set--mob">
   {# Rechnung Row #}
        <div class="row">
            <div class="col-sm-4">
                <label for="___select1___" class="control-label">
                    Rechnung
                </label>
            </div>
            <div class="col-sm-8 js-tooltip--container">
                {# select1 #}
                <select data-select-type="default" data-placeholder="Rechnung"
                        class="form-control js-select js-notification-set--rechnung" name="Rechnung" id="___select1___">
                    <option value="___select1_option1___">Brief</option>
                    <option value="___select1_option2___" selected>E-Mail</option>
                </select>
            </div>
        </div>
(...)
</div>

Answer 1

使用单选按钮的索引在<select>中选择相应的选项。

$(".js-notification-set--desk :radio").click(function() {
    var index = $(".js-notification-set--desk :radio").index(this);
    $(".js-notification-set--rechnung").prop('selectedIndex', index);
});

在收音机之间同步当前所选项目并选择

1 个答案: