未捕获错误:语法错误，不支持的伪错误

I am trying to fix a bug in my code which is very weird. I have the following code that creates an HTML. It calls a RemoveCompareOffer() function upon clicking a div. This function works fine for all types of id except for one id which is ADSL2:Bundles

我正在修复我代码中的一个非常奇怪的错误。我有以下创建HTML的代码。它在单击一个div时调用RemoveCompareOffer()函数

Function that creates HTML:

创建HTML的功能:

function AddCompareOfferInCompareBox()
{
    $('.SelectedOffer').each(function () {
        innerHtml = innerHtml + '<div class="compare-box"> <div class="compare-close"><span class="closed" onclick="RemoveCompareOffer(\''+ $(this).attr("id") + '\')"><i class="fa fa-times"></i></span></div>'
             + '<div class="compare-logo"><img src="' + $(this).attr("imagelink") + '" /></div><p>' + $(this).attr("offername") + '</p>'
             + '<input type="button" value="View Details" class="viewbtn" onclick="CallOfferRenderAction(\'' + $(this).attr("offercode") + '\',\'' + $(this).attr("providercode") + '\')" /></div>';
    });

    $(".AddCompareOfferByMe").html(innerHtml);
}

On this Function when it is called like this RemoveCompareOffer('ADSL2:Bundles')

在此函数中，当调用RemoveCompareOffer时('ADSL2: bundle ')

function RemoveCompareOffer(id) {
    $('#' + id + '.SelectedOffer').removeClass("SelectedOffer").addClass("NotSelected").attr('checked', false);
    AddCompareOfferInCompareBox();
    SetCompareBoxsState();
}

It Throws error:

它抛出错误:

jquery-1.11.3.min.js:3 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: Bundles

jquery-1.11.3.min。3未捕获错误:语法错误，未识别的表达式:不支持的伪:bundle

What could be the reason?

原因是什么呢?

1 个解决方案

#1

#ADSL2:Bundles.SelectedOffer is a selector saying to find the element that:

# ADSL2:包。SelectedOffer是一个选择器，用来找到元素

Has the id ADSL2

有id ADSL2
Matches the pseudo-class :Bundles

匹配的伪类:包
Has the class SelectedOffer

有类SelectedOffer

There's no CSS pseudo-class :Bundles nor does jQuery add its own; in your case, it's part of the ID. So you have to either escape the : or use attribute matching syntax.

没有CSS伪类:bundle, jQuery也没有添加自己的类;在您的示例中，它是ID的一部分，因此您必须要么退出:要么使用属性匹配语法。

Escaping:

转义:

var id = "ADSL2:Bundles";
$('#' + id.replace(/:/g, "\\:") + '.SelectedOffer').css("color", "blue");

<div id="ADSL2:Bundles" class="SelectedOffer">Escaping</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Using attribute matching syntax:

使用属性匹配的语法:

var id = "ADSL2:Bundles";
$('[id="' + id + '"].SelectedOffer').css("color", "blue");

<div id="ADSL2:Bundles" class="SelectedOffer">Escaping</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

#1