Question

我目前正在开发一个jquery移动格式化版本的网站（运行ColdFusion 10）。作为其中的一部分，我试图动态更新一个图标，根据需要扩展和折叠div。我只是使用以下内容根据其当前状态动态更新图标类和标题属性。这在Chrome上完美运行，但似乎在IE8或9上不能始终如一。只是想知道是否有人可能在此之前遇到过这个问题？

<cfset buttonCSS = "ui-btn ui-btn-icon-notext ui-corner-all ui-btn-inline">
<cfset showButtonCSS = buttonCSS & " ui-icon-carat-d greenGlow">
<cfset hideButtonCSS = buttonCSS & " ui-icon-carat-u redGlow">

<link rel="stylesheet" href="javascript/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="javascript/jquery-1.9.1.min.js"></script>
<script src="javascript/jquery.mobile-1.4.0.min.js"></script>

<cfoutput>
  <script>
     $(document).ready(function(){
       $(document).on("click", "#idName", function(e){  
          $(".myDiv").toggle("slow");

          if($("#idName").attr("class") == "<cfoutput>#showButtonCSS#</cfoutput>"){
            $("#idName").attr("class", "<cfoutput>#hideButtonCSS#</cfoutput>");
            $("#idName").attr("title", "Hide");
          }
          else{
            $("#idName").attr("class", "<cfoutput>#showButtonCSS#</cfoutput>");
            $("#idName").attr("title", "Show all");
          }
        });
      });
    </script>
  </cfoutput>

<cfoutput>
  <a href="##" id="idName" class="#showButtonCSS#" title="Show all">Show/Hide</a>
</cfoutput>

为了测试发生了什么，我添加了警报（$（“＃idName”）。attr（“class”））;在IF语句之前和之后，它确实显示了正确的值，但它们没有反映在屏幕上。

这是一个错误还是有更好的方法来实现这个目标？

任何帮助都将不胜感激。

Answer 1

尝试为您支持的特定IE实现一些经典条件。

CSS

的jQuery

if ($.browser.msie) {
   //IE
} else {
   //NOT IE
}

或者经典的IE特定JS。

/*@cc_on
document.write("JScript version: " + @_jscript_version + ".<br>");
   /*@if (@_jscript_version >= 5)
      document.write("JScript Version 5.0 or better.<br \/>");
      document.write("This text is only seen by browsers that support JScript 5+<br>");
   @else @*/
      document.write("This text is seen by all other browsers (ie: Firefox, IE 4.x etc)<br>");
   /*@end
@*/

Answer 2

好的，我发现做类似以下的事情似乎适用于Chrome以及IE8和IE9：

if($("#idName").hasClass("ui-icon-carat-d")){   
  $("#testSpan").html("<a href='##' id='idName' class='<cfoutput>#hideButtonCSS#</cfoutput>' title='Hide'>Show/Hide</a>");
}
else{
  $("#testSpan").html("<a href='##' id='idName' class='<cfoutput>#showButtonCSS#</cfoutput>' title='Show all'>Show/Hide</a>");
}

<span id="testSpan"><a href='##' id='idName' class='#showButtonCSS#' title='Show all'>Show/Hide</a></span>

正如你所看到的那样，它不是很优雅，但它似乎可以完成这项工作。我仍然感到困惑的是，为什么OP中的方法在所有浏览器中都无法正常工作。

JQuery Mobile - 在IE中动态更新图像

2 个答案: