Syntaxfehler, nicht erkannte Äußerung: '.d img.displayImage'

Question

Das ist mein HTML ist:

<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> 

Das ist mein js ist:

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; 
}); 

Dieser den Wert des nächsten <textarea> nehmen sollte die img.displayImage in der ausgewählten '<div>', und nehmen Sie auch die src der img.displayImage, aber ich bekomme den folgenden Fehler und ich bin mir nicht sicher, wie zu beheben.

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

UPDATE

nicht mehr die Fehlermeldung zu erhalten, aber jetzt contentVal und imagePath zeigen als nicht definiert. Irgendeine Idee, warum undefiniert könnte zeigen?

Answer 1

Sie haben zusätzliche Apostroph in jQuery-Selektor, der wie $("'.a .. ..'")

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

1. Auch $(..).src ausgeben wird nicht definiert zu einem ungültigen Selektor auswertet. Verwenden Sie $(..)[0].src oder $(..).prop('src'), um die Quelle zu erhalten.
2. .closest('..') am nächsten liegendes Elternelement zurückgeben. <textarea> Hier ist das Geschwister img. Verwenden Sie .next('textarea') statt .closest()

Answer 2

Ich sehe zwei mögliche Probleme mit Ihrem Code. Zunächst einmal glaube ich nicht, dass jQuery-Selektoren in einfache Anführungszeichen eingeschlossen werden müssen, also loswerden. Zweitens haben Sie bei der Suche nach dem nächsten Textbereich ein Leerzeichen zwischen arr [i] und img.displayImage verpasst.

Ich würde vorschlagen, das jQuery ausgewählte Element Caching:

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

Beachten Sie, dass die `Zeichen backticks sind, in der Regel an der oberen linken Ecke der englischen Tastaturen gefunden. Diese Syntax erfordert, dass die ES6-Zeichenfolgeninterpolation von den Browsern unterstützt wird, auf die Sie ausgerichtet sind. Alternativ können Sie den Selektor einfach mit derselben Methode erstellen, die Sie derzeit verwenden.

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