语法错误，无法识别的表情： '.D img.displayImage'

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>的价值在所选的'<div>'中的img.displayImage，并且还采用img.displayImage的src，但出现以下错误，我不确定如何解决。

Uncaught Error: Syntax error, unrecognized expression: '.d img.displayImage'

UPDATE

不再收到错误消息，但现在contentVal和imagePath被显示为未定义。任何想法为什么undefined可能会显示？

Answer 1

你有jQuery选择额外的单引号，这是取值为无效选择像$("'.a .. ..'")

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

1. 此外$(..).src将输出不确定。请使用$(..)[0].src或$(..).prop('src')来获取源代码。
2. .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'"); 
...