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

Question

我创建了一个用于选择多个图像的按钮 .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 和 class 名称 .imagewrapper 包裹它。然后在每个 .imagewrapper 中，我附加另一个 div 和 class 名称 .removeit class 图像按钮，如下所示：

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 时才会发生这种情况。我不确定如何摆脱这个错误！

Answer 1

Cannot read property 'replace' of undefined

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

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

所以 currentimgsrc.val() returns undefined。这发生在 currentimgsrc（通过 jquery .find 定义）是一个空的 jquery 集合。

您可以检查 currentimgsrc.val() 是否未定义，但检查 .val() 左侧的代码是否也同样容易/快速，在这种情况下，它是一个 jquery 对象，所以你可以用

检查前一个 .find() 是否确实找到了一个元素

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

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

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

Console Error when using variable in jQuery

jquery

replace

append

onclick

undefined