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

我目前正在开发一个jquery mobile格式的站点版本（使用ColdFusion 10）。作为这项工作的一部分，我尝试动态更新一个图标，根据需要展开和折叠一个div。我只是使用下面的代码根据当前状态动态更新icons类和title属性。这在Chrome上非常有效，但在IE8或IE9上似乎并不一致。只是想知道以前是否有人遇到过这个问题

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

$（文档）.ready（函数（）{
$（文件）。在（单击）上，函数（e）{
$（“.myDiv”）。切换（“慢速”）；
if（$（“#idName”）.attr（“类”）==“#showButtonCSS”）{
$（“#idName”）.attr（“类”，“隐藏按钮类”）；
$（“#idName”）.attr（“标题”、“隐藏”）；
}
否则{
$（“#idName”）.attr（“类”，“showButtonCSS”）；
$（“#idName”）.attr（“标题”、“全部显示”）；
}
});
});

为了测试发生了什么，我添加了alert（$（“#idName”）.attr（“class”）；在IF语句之前和之后，它确实显示正确的值，但它们不会反映在屏幕上

这是一个bug还是有更好的方法可以实现

---

任何帮助都将不胜感激。

尝试为您支持的特定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
@*/

/*@cc\u on
文件。编写（“JScript版本：++@_JScript_版本+”
”；
/*@如果（@_jscript_version>=5）
编写（“JScript 5.0版或更高版本。”）；
document.write（“此文本仅由支持JScript 5+
的浏览器查看”）；
@否则@*/
document.write（“此文本被所有其他浏览器（如Firefox、IE4.x等）看到）
”；
/*@结束
@*/

好的，我发现在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>

if（$（“#idName”）.hasClass（“ui-icon-carat-d”）{
$（“#testSpan”）.html（“”）；
}
否则{
$（“#testSpan”）.html（“”）；
}

---

正如你所看到的，它不是很优雅，但它似乎做的工作。但是，我仍然不明白为什么OP中的方法不能在所有浏览器中正常工作。

既然您使用的是jQuery，那么使用.hasClass、.addClass、.removeClass函数而不是使用cfoutput all class字符串如何？嗨，我尝试了以下方法，但仍然得到了相同的结果：if（$（“#idName”）.hasClass（“ui-icon-carat-d”）{$（“#idName”）.removeClass（“ui btn ui btn icon notext ui corner所有ui btn内联ui-icon-carat-d”）$（“#idName”）.addClass（“ui btn ui btn icon notext ui corner所有ui btn内联ui-icon-carat-u”）}其他{$（“#idName”）.removeClass（“ui btn ui btn ui btn icon notext ui corner所有ui btn内联ui-icon-carat-u”）$（“#idName”）.addClass”）(“ui-btn-ui-btn-icon-notext-ui-corner-all-ui-btn-inline ui-icon-carat-d”）}抱歉，刚刚意识到上述内容应该简化为（但仍然不起作用）：if（$（“#idName”）.hasClass（$）{$（“#icon-carat-d”）。removeClass（$（“ui-icon-carat-d”）；$）.addClass（“#idName”）.addClass”（“ui-icon-carat-u”）}else（$）.removeClass（“ui-icon-carat-u”）；$（“#idName”）.addClass（“ui-icon-carat-d”）}与问题无关，您可以链接函数，如.removeClass（“ui-icon-carat-u”）.addClass（“ui-icon-carat-d”）：）IE8和IE9中会发生什么？基本上IE9应该像Chrome一样工作。嗨，特工，不幸的是，我还不知道如何在IE中正常工作。好了，现在IE8中不再工作了。令人沮丧。