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);
    }
}

Answer 2

你可以试试这个：

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

DEMO

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

2 个答案: