JQuery Mobile - динамическое обновление изображений в IE

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") атр ("класс").); до и после оператора IF, и он показывает правильные значения, но они не отражаются на экране.

Является ли это ошибкой или есть лучший способ добиться этого?

Любая помощь будет оценена по достоинству.

Answer 1

Попробуйте реализовать некоторые классические условные обозначения для конкретного IE, который вы поддерживаете.

CSS

• http://www.quirksmode.org/css/condcom.html
• http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

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 не работает должным образом во всех браузерах.