javascript - Jquery 函数在 Internet Explorer 中只能运行一半

Question

我在页面中添加了一个简单的功能，用于在单击某些选项卡时隐藏/显示 Pane 。世界上最简单的事情，对吧？

在 Firefox 和 Chrome 中完美运行，但在 IE 中只能运行一半。它将隐藏所有 sopMonthContainer，但无法找到具有匹配 ID 的容器并显示它。

 $('.sopTab').click(function(e){
    if ($(this).hasClass("activeTab") === false){
        $(".sopTab").removeClass("activeTab");
        $(this).addClass("activeTab");
        };
    var selectionID = $(this).attr("id");
    $(".sopMonthContainer").css("display", "none");
    $(".sopMonthContainer#the"+selectionID).css("display", "block");
 });

我希望这不是我忽略的一些愚蠢的打字错误，但我已经盯着这个东西近一个小时，尝试主题的不同变体。我尝试过重新设计选择器 ID 以确保它们是唯一的(因此最后一行选择器中的“the”)，我尝试过仅使用 ID 进行选择，我尝试过使用不同的方法来隐藏/显示...无论如何，结果都是一样的。

编辑:相关标记。它有一些 Coldfusion 元素，## 之间的任何内容都是 Coldfusion 变量。

<div class="sopTab" id="sopContainer#DateFormat(pubdate,'mmmm')#" style="">
    #DateFormat(pubdate,"mmmm")#: <span id="sum#DateFormat(pubdate,"mmmm")#">0</span>
</div>

<cfoutput query="GetProductBasicInfo">
    <div class="sopMonthContainer" style="display:none;" 
    id="theSopContainer#DateFormat(pubdate,'mmmm')#">
        [div content goes here]
     </div>
</cfoutput>

Answer 1

请注意例如:

<div class="sopTab" id="sopContainerNovember" style="">November: <span id="sumNovember">0</span></div>

<div class="sopMonthContainer" style="display:none;" id="theSopContainerNovember">

当你点击sopTab时，你构建的选择器是

#thesopContainerNovember
//  ^  

但是目标的ID是

#theSopContainerNovember
//  ^

ID 不匹配(是大写和小写 s )