在 jQuery 中使用变量时出现控制台错误答案

【问题标题】：Console Error when using variable in jQuery在 jQuery 中使用变量时出现控制台错误
【发布时间】：2020-09-14 01:10:01
【问题描述】：

我创建了一个按钮用于选择多个图像.multiple-image-button 并输出.imagefieldmulti 中的值

<div class="imagefieldwrapper pt-3">
<input type="text" size="36" name="lbu_multiple_gallery_images" class="imagefield imagefieldmulti" placeholder="Images URL" value="" /> 
<a class="multiple-image-button"><div class="row m-0 text-center align-items-center image-button-container"><div class="col h1"><i class="far fa-images"></i><br><h6>Add Images</h6></div></div></a>
<a id="lbu_multiple_gallery_reset" class="btn btn-warning multiple-image-reset" role="button" style="display:none;">Reset</a>
<div class="imageListId row m-0 klara-wrapper-inputs-holder multiple-images-wrapper" data-img-classes="listitemClass" data-img-width="100"></div>
</div>

输入.imagefieldmulti 以逗号分隔值保存所有选定的图像，例如

http://example.com/img1.jpg,http://example.com/img2.jpg,http://example.com/img3.jpg

对于选择的每个图像，我用div 将其包装起来，类名.imagewrapper。然后在每个.imagewrapper 中，我附加另一个带有类名.removeit 类图像按钮的div，如下所示：

var settingsOutput = $(button).closest(".imagefieldwrapper");
settingsOutput.find(".listitemClass" ).wrap( "<div class='imagewrapper col-lg' style='padding: 0px; min-width:33.3333%;'></div>" );
settingsOutput.find('.imagewrapper').append( "<div class='removeit'>X</div>" );

单击 .removeit 按钮时，它会从 .imagefieldmulti 值中删除 src url 并仅保留其他值。

$(document).on('click', '.removeit', function() {
   var imgsrc = $(this).closest('.imagewrapper').find('.listitemClass').attr('src');
   var currentimgsrc = $(this).closest('.imagefieldwrapper').find('.imagefieldmulti');
            
   currentimgsrc.val(currentimgsrc.val().replace(imgsrc + ',', ""));
   currentimgsrc.val(currentimgsrc.val().replace(imgsrc, ""));
   currentimgsrc.change();

   $(this).closest('.imagewrapper').remove();
});

现在这工作正常，但我总是收到错误Cannot read property 'replace' of undefined

只有当我的表单中有多个.imagefieldwrapper div 时才会发生这种情况。我不知道如何摆脱这个错误！

【问题讨论】：

创建演示代码可能有助于了解问题所在。
请点击编辑然后点击[<>] sn-p 编辑器并提供minimal reproducible example
@mplungjan 如果我删除这部分$(this).closest('.imagewrapper').remove(); 它不会显示错误，但仍然需要这部分$(this).closest('.imagewrapper').remove();
当元素明显不存在时，您应该在尝试读取 .val() 之前检查 currentimgsrc.length（因此 .val() 给出 undefined ，然后您会得到清楚地解释的错误无法读取未定义的属性的问题
@freedomn-m 检查currentimgsrc.length 已解决该错误，您能否将您的评论作为答案发送，以便我标记为已解决。谢谢亲爱的

标签： jquery replace onclick append undefined

【解决方案1】：

无法读取未定义的“替换”属性

表示紧邻.replace() 左侧的代码是undefined，在这种情况下，它似乎是这一行：

currentimgsrc.val(currentimgsrc.val().replace(imgsrc + ',', ""));

所以currentimgsrc.val() 返回undefined。 currentimgsrc（通过 jquery .find 定义）是一个空的 jquery 集合会发生这种情况。

您可以检查 currentimgsrc.val() 是否未定义，但检查 .val() 左侧的代码是否也有效同样容易/快速，在这种情况下，它是一个 jquery 对象，因此您可以检查是否之前的.find()实际上找到了一个元素还是没有

if (currentimgsrc.length > 0)  {
    currentimgsrc.val(currentimgsrc.val().replace(imgsrc + ',', ""));
}

jquery 通常可以很好地处理空集合，但是您仍然需要处理任何返回值（例如.val()）

【讨论】：

我试过 if ( currentimgsrc.length ) { 或 if (currentimgsrc.length > 0) { 都可以正常工作。谢谢