語法錯誤，無法識別的表情： '.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'"); 
...