基于同父收音机的输入变化值

Question

我有一个网页，我想要改变一个文本输入的值，根据相应的单选按钮选择。与其使用每个文本输入和单选按钮的ID，我希望遵循一个简单的模式，其中文本输入的值基于共享(非立即)父字段集的单选按钮。

实现这一点有不止一种方法，但我的策略是查找单选按钮最近的父母字段集(也是文本输入的父字段集)，搜索它以找到正确的文本输入，并更改文本输入的值。

到目前为止，这是我所拥有的，但不起作用：

jQuery('.big-container input[id$="-selector-1"]').change(function() {
    var parent = jQuery('.smaller-container input[id$="-selector-1"]').closest('fieldset');
    jQuery('parent').find('.fieldset-wrapper div:nth-child(2) input').val('1');
});
jQuery('.big-container input[id$="-selector-2"]').change(function() {
    var parent = jQuery('.smaller-container input[id$="-selector-2"]').closest('fieldset');
    jQuery('parent').find('.fieldset-wrapper div:nth-child(2) input').val('0');
});

HTML：

<fieldset class="big-wrapper">
    <div class="fieldset-wrapper">
        <fieldset class="medium-wrapper-1">
            <div class="fieldset-wrapper">
                <div>...</div> <!-- unimportant -->
                <fieldset class="smaller-container-1">
                    <div class="fieldset-wrapper">
                        <div>
                            <label>...</label>
                            <div class="form-radios">
                                <div class="radio-1-wrapper">
                                    <div class="input-label-wrapper">
                                        <input id="blahblahblah-selector-1">...</input>
                                        <label>...</label>
                                    </div>
                                </div>
                                <div class="radio-2-wrapper">
                                    <div class="input-label-wrapper">
                                        <input id="blahblahblah-selector-2">...</input>
                                        <label>...</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-input-X">
                            <label>...</label>
                            <input>...</input>
                        </div>
                        <div class="text-input-Y">...</div> <!-- parallel to .text-input-X -->
                        <div class="text-input-Z">...</div> <!-- parallel to .text-input-X -->
                    </div>
                </fieldset>            
                <fieldset class="smaller-container-2">...</fieldset> <!-- parallel to .smaller-container-1 -->
                <fieldset class="smaller-container-3">...</fieldset> <!-- parallel to .smaller-container-1 -->
                <fieldset class="smaller-container-4">...</fieldset> <!-- parallel to .smaller-container-1 -->           
            </div>
            </fieldset>                
        <fieldset class="medium-wrapper-2">...</fieldset> <!-- parallel to .medium-wrapper-1 -->      
    </div>                
</fieldset>

如果不清楚，input[id$="-selector-1"]和input[id$="-selector-2"]是单选按钮，而在div.text-input-X中的常规输入是我想要更改的。

我做错了什么？

Answer 1

让我们一步一步地进行更改，以简化代码，并希望能够澄清代码以满足您的目标。

1:，您在使用jQuery，但我将使用简写的$ --除非您有一个很好的理由(即担心冲突)，这将提高可读性。

$('.big-container input[id$="-selector-1"]').change(function() {
    var parent = $('.smaller-container input[id$="-selector-1"]').closest('fieldset');
    $('parent').find('.fieldset-wrapper div:nth-child(2) input').val('1');
});

2:修复了不正确的父引用(如上面的注释中提到的)。

$('.big-container input[id$="-selector-1"]').change(function() {
    var parent = $('.smaller-container input[id$="-selector-1"]').closest('fieldset');
    parent.find('.fieldset-wrapper div:nth-child(2) input').val('1');
});

3:下一步，我们将为每个输入元素创建多个绑定，我们将创建一个委托绑定，该绑定将绑定到dom上可用的最接近的公共父节点--在本例中，就是.big-wrapper容器。我还将选择器从$-selector-1更新为更通用的*-selector-，以捕获所有单选按钮。您可以更多地了解在.on() 文档中使用委托的优点。

$('.big-wrapper').on('change', 'input[id*="-selector-"]', function () {
    var parent = $('.smaller-container input[id$="-selector-1"]').closest('fieldset');
    $parent.find('.fieldset-wrapper div:nth-child(2) input').val('1');
});

5:使用更清晰的变量名(例如：$fieldset而不是parent)可以帮助您操作jquery元素。另外，请注意，我们能够以更简单的方式获得目标文本输入字段。注意:我喜欢在变量的前面加上一个'$‘号，以表示它是一个jQuery元素/集合。

$('.big-wrapper').on('change', 'input[id*="-selector-"]', function () {

    var $radio = $(this),
        $fieldset = $radio.closest('fieldset'),
        $input = $fieldset.find(".text-input-X input"),
        value = $radio.prop('id'); // <-- just as an example instead of the '1'

    $input.val(value);
});

演示： JSFiddle

我希望这里有足够的资源帮助你走上正确的轨道。祝好运。

更新：

如果可以更新标记，则可以设置无线电输入的value属性，并使用它将文本字段的值设置为$radio.val()。

演示： JSFiddle