javascript - 动态创建或设置隐藏输入的 jQuery 函数

Question

我正在尝试创建一个动态更新隐藏输入的函数。

以下是我的功能:

function updateDeletedFileIds(deletedFileId) {
    if($('input[name=multiFieldDeletedIds]') == null) {
        $('.selected_file_info').append('<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="'+deletedFileId+'" />');
    }
    else{
        id = $('input[name=multiFieldDeletedIds]').val();
        id += ','+deletedFileId
        $('input[name=multiFieldDeletedIds]').attr('value', id);

    }
}

这是我的预期输出:当第一次调用 updateDeletedFileIds 函数时，它应该创建一个隐藏的输入标记并根据 deletedFileId 设置值

updateDeletedFileIds(1) =>
'<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="1" />'

当第二次调用时，它应该只更新以逗号分隔的值

updateDeletedFileIds(2) =>
'<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="1,2" />'

updateDeletedFileIds(3) =>
'<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="1,2,3" />'

但是我的功能没有按预期工作。有人可以帮我吗？

Answer 1

要检查 jQuery 选择器是否返回任何内容，您应该检查其 length 属性。我还建议使用 val() 而不是 attr() 来设置值，因为 attr() 仅影响 html 属性，而val() 设置其 DOM 属性。

function updateDeletedFileIds(deletedFileId) {
    var $el = $('input[name=multiFieldDeletedIds]');
    if(!$el.length) {
        $('.selected_file_info').append('<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="'+deletedFileId+'" />');
    }
    else if ($el.val().indexOf(deletedFileId) < 0) {
        $el.val($el.val() + ',' + deletedFileId);
    }
}