0

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>
4

3 に答える 3

2

たとえば、次のことに注意してください。

<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）

于 2012-09-18T14:57:19.187 に答える
1

最後の行は

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

ここにスペースがあるはずです。しかし、私は間違っているかもしれません。jsFiddleまたは実用的な例へのリンクを投稿すると役立ちます。

于 2012-09-18T14:17:40.010 に答える
0

ページにエラーがあります。誰かがコメントアウトしようとしたように見えるコードがいくつかあることに気付きましたが、それは間違っていました。

sopQuery.cfm ファイルで、次のコードを変更します。

<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>

これに：

<!--
<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>
-->

または...コードのコメントを外す必要がある場合は、これに変更しますが、変数がどこにも定義されていないため、エラーが続くことに注意してください。cfform_submit_status

<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>

おそらく、ここで定義されているはずです：

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

しかし、私が見たところ、そのファイルは空です。

于 2012-09-18T14:40:09.327 に答える