Question

这是我的HTML：

<div class="flex-item a">
    <p>A</p>
    <img class="displayImage" src="img/image-placeholder.svg" />
    <textarea class="textInput"></textarea>
</div>

<div class="flex-item b">
    <p>B</p>        
    <img class="displayImage" src="img/image-placeholder.svg" />
    <textarea class="textInput"></textarea>
</div>

<div class="flex-item c">
    <p>C</p>        
    <img class="displayImage" src="img/image-placeholder.svg" />
    <textarea class="textInput"></textarea>
</div>

<div class="flex-item d">
    <p>D</p>        
    <img class="displayImage" src="img/image-placeholder.svg" />
    <textarea class="textInput"></textarea>
</div>

这是我的js：

var arr = ["a", "b", "c", "d"];
var imageAreaArray = [];

$.each(arr, function(i, val){
    imageAreaArray.push("document.querySelector('." + val + " img.displayImage')");
});    

$.each(imageAreaArray, function(i, val){
    var contentVal = $("'." + arr[i] + "img.displayImage'").closest('textarea');
    imagePath = $("'." + arr[i] + " img.displayImage'").src;
});

这应该取最近的<textarea>与所选“img.displayImage”中<div>的值，并取src img.displayImage ，但我得到以下错误，我不知道如何解决。

未捕获错误：语法错误，无法识别的表达式：'。d img.displayImage'

更新

不再收到错误消息，但现在contentVal和imagePath显示为未定义。知道为什么未定义可能会出现吗？

Answer 1

你在jQuery选择器中有额外的单引号，它正在评估像$("'.a .. ..'")这样的无效选择器

$.each(imageAreaArray, function(i, val){
    var contentVal = $("'." + arr[i] + "img.displayImage'").closest('textarea');
    //                 ^^
    imagePath = $("'." + arr[i] + " img.displayImage'").src;
    //            ^^
});

同样$(..).src将输出undefined。使用$(..)[0].src或$(..).prop('src')获取来源。
.closest('..')返回最接近的父元素。 <textarea>这里是img的兄弟姐妹。使用.next('textarea')代替.closest()

Answer 2

我发现您的代码存在两个潜在问题。首先，我不相信jQuery选择器需要用单引号括起来，所以要摆脱它们。其次，在查询最近的textarea时，你错过了arr [i]和img.displayImage之间的空格。

我建议缓存jQuery所选元素：

var element = $(`.${arr[i]} img.displayImage`);
var contentVal = element.closest('textarea');
imagePath = element.src;

请注意，`字符是backticks，通常位于英文键盘的左上角。此语法要求您定位的浏览器支持ES6字符串插值。作为替代方案，您可以使用您当前使用的相同方法构建选择器。

var element = $("'." + arr[i] + " img.displayImage'");
...

语法错误，无法识别的表达式：'。d img.displayImage'

2 个答案: