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

This is my HTML:

这是我的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>

This is my js:

这是我的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;
});

This should take the value of the nearest <textarea> to the img.displayImage in the selected '<div>', and also take the src of the img.displayImage, but I get the following error and I'm not sure how to fix.

这应该取最近的的值到选定的'

'中的img.displayImage,并且还获取img.displayImage的src,但是我得到以下错误,我不知道如何固定。

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

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

UPDATE

No longer getting the error message, but now contentVal and imagePath are showing as undefined. Any idea why undefined might be showing?

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

2 个解决方案

#1

You have additional single quote in jQuery selector, which is evaluating to a invalid selector like $("'.a .. ..'")

你在jQuery选择器中有额外的单引号,它正在评估一个无效的选择器,如$(“'。a .. ..'”)

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

Also $(..).src will output undefined. use $(..)[0].src or $(..).prop('src') to get source.

另外$(..)。src将输出undefined。使用$(..)[0] .src或$(..)。prop('src')获取源代码。

.closest('..') return closest parent element. <textarea> here is the sibling of img. Use .next('textarea') instead of .closest()

.closest('..')返回最接近的父元素。这里是img的兄弟。使用.next('textarea')代替.closest()</p>

#2

I see two potential problems with your code. First off, I don't believe that jQuery selectors need to be wrapped in single quotes, so get rid of those. Secondly, when querying for the closest textarea you missed a space between arr[i] and img.displayImage.

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

I would suggest caching the jQuery selected element:

我建议缓存jQuery选中的元素:

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

Notice that the ` characters are backticks, typically found at the top-left of English keyboards. This syntax requires that ES6 string interpolation is supported by the browsers you're targeting. As an alternative, you can just build the selector by using the same method you're currently employing.

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

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

#1