【jquery属性选择器】若value值设置为变量易错点

一、问题发现

今天用jquery属性选择器时，发现一直不能输出想要结果，发现了一个很简单但很容易错的细节：

代码如下：

$("#card li").on("click", function (e) {
    let el = $(e.target).parent();
    let data = $(el).attr("data-id");
    if($("#box").children().length==7) return 0;
    $(el).clone().appendTo($("#box"));
    if($("#box").children("[data-id=data]").length==3){
        $("#box").children("[data-id=data]").remove();
    }
    el.hide();
});

二、问题解决

我们知道jquery有选择器，筛选器，如上方的$()与children(),里面都可以以字符串的形式传入选择器表达式，当其中的值选用变量时，需要用+或模板字符串将变量与其他字符串连接起来。

如将

$("#box").children("[data-id=data]")

改成

$("#box").children("[data-id="+data+"]")

或

$("#box").children(`[data-id=${data}]`)

改动后则可解决问题。