语法错误，无法识别的表达式：“.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;
});

这里应该取选择的'<div>'中最接近img.displayImage的<textarea>的值，同时取[=14的src的值=]，但出现以下错误，我不确定如何修复。

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

更新

不再收到错误消息，但现在 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;
    //            ^^
});

另外$(..).src会输出undefined。使用 $(..)[0].src 或 $(..).prop('src') 获取源代码。
.closest('..') return 最近的父元素。 <textarea> 这里是 img 的兄弟姐妹。使用 .next('textarea') 而不是 .closest()

Answer 2

我发现您的代码存在两个潜在问题。首先，我不认为 jQuery 选择器需要用单引号括起来，所以去掉它们。其次，在查询最近的文本区域时，您错过了 arr[i] 和 img.displayImage 之间的 space。

我建议缓存 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”

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

html

javascript

jquery

syntax-error