使用模板文字无法识别的表达

Question

执行此代码：

let pathb = $('.cslideract').attr('data-pathb');
console.log(pathb);

我得到以下结果：anima/01/inc。

现在，我尝试这个功能的使用方法：

if($(`.partslider[data-pathb=${pathb}]`).length > 0){console.log('323');}

我得到这个错误：

unrecognized expression: .partslider[data-pathb=anima/01/inc/]

我试着用let pathb = 'anything'相同，它的工作原理，但我的变量是anima/01/inc

Answer 1

如jQuery的文档显示here，你需要使用周围的属性选择值引号。尝试这个：

if($(`.partslider[data-pathb="${pathb}"]`).length > 0){console.log('323');}

这也是CSS attribute selectors如此。

Answer 2

您可能逃脱具有在CSS选择器（$.escapeSelector()）的特殊含义的字符：

let pathb = 'anima/01/inc';

console.log(`.partslider[data-pathb=${$.escapeSelector(pathb)}]`);

if($(`.partslider[data-pathb=${$.escapeSelector(pathb)}]`).length > 0){
    console.log('323');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

使用引号包围""字面

let pathb = $('.cslideract').attr('data-pathb');
console.log(pathb);


if($(`.partslider[data-pathb="${pathb}"]`).length > 0){console.log('323');}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cslideract" data-pathb="anima/01/inc"></div>
<div class="partslider" data-pathb="anima/01/inc"></div>