Question

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

在Firefox和Chrome中完美运行，但在IE中只有一半有效。它将隐藏所有sopMonthContainers，但无法找到具有匹配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

我认为最后一行应该是

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

这里应该有一个空间。但我可能错了。如果您将链接发布到jsFiddle或工作示例，将会有所帮助。

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

Answer 3

您的信息页中有错误。我注意到有一些代码似乎有人试图对其进行评论但是做错了。

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

但我看了，那个文件是空的。

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

3 个答案: