Question

我有一个webform，我想根据相应的单选按钮选择更改文本输入的值。我不想使用每个文本输入和单选按钮的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：您正在使用func updateCoreData(id: NSNumber, entityName: String, propertiesToUpdate: [String: AnyObject], privateContext: NSManagedObjectContext) -> Bool { let batchRequest = NSBatchUpdateRequest(entityName: entityName) batchRequest.predicate = NSPredicate(format: "id == %@", id) if !doesOrderExists(entityName, id: id, context: privateContext) { return false } batchRequest.propertiesToUpdate = propertiesToUpdate batchRequest.resultType = .UpdatedObjectIDsResultType do { let res = try privateContext.executeRequest(batchRequest) as! NSBatchUpdateResult let orderIDs = res.result as! [NSManagedObjectID] return (orderIDs.count != 0) ? true : false } catch { print(error) } return false }，但我会使用速记jQuery - 除非您有充分的理由（即担心冲突），这将提高易读性。

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-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'); });容器。我还将选择器从.big-wrapper更新为更一般的$-selector-1以捕获所有单选按钮。您可以在*-selector- documentation中详细了解使用授权的优势。

.on()

5：使用更清晰的变量名称（例如：$('.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'); });代替$fieldset）可以帮助您操作jquery元素。另外，请注意我们能够以更简单的方式获取目标文本输入字段。注意：我喜欢在变量前加上＆＃39; $＆＃39;用来表示它是一个jQuery元素/集合。

parent

演示： JSFiddle

我希望这里有足够的东西帮助你走上正轨。祝你好运。

<强>更新

如果您可以更新标记，则可以设置无线电输入的$('.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); });属性，并使用它将文本字段的值设置为value

演示： JSFiddle

基于同一父母的无线电更改输入值

1 个答案: