jQuery函数只能在Internet Explorer中正常工作

Question

I've gut a simple function in my page for hiding/showing panes when some tabs are clicked. Simplest thing in the world, right?

Works perfectly in Firefox and Chrome, but in IE it only half works. It will hide all the sopMonthContainers, but fails to find the container with a matching ID and display it.

 $('.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");
 });

I'm hoping it isn't some stupid typo that I've overlooked, but I've been staring at this thing for nearly an hour trying different variations on the theme. I've tried reworking the selector IDs to make sure they're unique (hence the "the" in the selector on the last line), I've tried selecting using only ID, I've tried using different methods to hide/show... same result no matter what.

EDIT: the relevant markup. It's got some coldfusion elements, anything between ##'s is a coldfusion variable.

<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

Note for example this:

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

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

when you click on sopTab, the selector you build is

#thesopContainerNovember
//  ^  

but the ID of the target is

#theSopContainerNovember
//  ^

the IDs did not match(it's the uppercase and lowercase s )

Answer 2

I think that the last line should be

$(".sopMonthContainer #the"+selectionID).css("display", "block");

There should be a space here. But I might be wrong. It would help if you would post a link to a jsFiddle or working example.

Answer 3

You have an error in your page. I noticed there's some code that looks like someone has attemped to comment it out but done it incorrectly.

In your sopQuery.cfm file, change the code here:

<script language="javascript">
<!--
  cfform_submit_status["productSelections"]=null;

  function check_TF_productSelections( theForm ){ 
    cfform_isvalid = true;
    cfform_error_message = "";
   cfform_invalid_fields = new Object();

    if ( cfform_isvalid ){
      return true;
    }else{
      alert( cfform_error_message );
      return false;
    }
  }

//-->
</script>

To this:

<!--
<script language="javascript">

  cfform_submit_status["productSelections"]=null;

  function check_TF_productSelections( theForm ){ 
    cfform_isvalid = true;
    cfform_error_message = "";
   cfform_invalid_fields = new Object();

    if ( cfform_isvalid ){
      return true;
    }else{
      alert( cfform_error_message );
      return false;
    }
  }


</script>
-->

OR... If the code is supposed to be uncommented, change it to this, but note that the error will persist as the variable cfform_submit_status is not defined anywhere:

<script language="javascript">

  cfform_submit_status["productSelections"]=null;

  function check_TF_productSelections( theForm ){ 
    cfform_isvalid = true;
    cfform_error_message = "";
   cfform_invalid_fields = new Object();

    if ( cfform_isvalid ){
      return true;
    }else{
      alert( cfform_error_message );
      return false;
    }
  }


</script>

Presumably it's supposed to be defined here:

<script type="text/javascript" src="/bluedragon/scripts/cfform.js"></script>

But I looked and that file is empty.