JQuery와 "이"인터넷 익스플로러

Question

나는 아래의 코드에서 IE 몇 가지 문제에 봉착 :

var energia = $(".energia").html().replace("%", ""); 
var guias = $(".guias").html().replace("%", ""); 
var pavim = $(".pavim").html().replace("%", ""); 
var rede_a = $(".rede_agua").html().replace("%", ""); 
var rede_d = $(".rede_drena").html().replace("%", ""); 
var total = $(".total").html().replace("%", ""); 

$('div.progresso').css({ backgroundPosition: "0px 85px" }); 
$('div.progresso').bind('mouseover', function() { 
    var fclass = $(this).attr("class"); 
    switch (fclass) { 
     case (fclass = "progresso energia"): 
      $(this).stop().animate({ backgroundPosition: "(0px " + energia + "px)" }, { duration: 500 }); 
      break; 
     case (fclass = "progresso guias"): 
      $(this).stop().animate({ backgroundPosition: "(0px " + guias + "px)" }, { duration: 500 }); 
      break; 
     case (fclass = "progresso pavim"): 
      $(this).stop().animate({ backgroundPosition: "(0px " + pavim + "px)" }, { duration: 500 }); 
      break; 
     case (fclass = "progresso rede_agua"): 
      $(this).stop().animate({ backgroundPosition: "(0px " + rede_a + "px)" }, { duration: 500 }); 
      break; 
     case (fclass = "progresso rede_drena"): 
      $(this).stop().animate({ backgroundPosition: "(0px " + rede_d + "px)" }, { duration: 500 }); 
      break; 
     default: 
      fclass = null; 
      break; 
    } 
}); 

그리고 여기에 HTML :이 기능은 각각의 번호를 잡아야

<div class="ball ball_energia grande bold"><div class="progresso energia">10%</div></div> 
    <div class="ball ball_guias grande bold"><div class="progresso guias">10%</div></div> 
    <div class="ball ball_pavim grande bold"><div class="progresso pavim">30%</div></div> 
    <div class="ball ball_rede_agua grande bold"><div class="progresso rede_agua">90%</div></div> 
    <div class="ball ball_rede_drena grande bold"><div class="progresso rede_drena">80%</div></div> 
    <div class="ball_maior grande2 bold"><div class="progresso_maior total">50%</div></div> 

을 그 각 div와 내가 호출하는 함수를 실행하는 자체를 처리, 그 번호로 각 div를 분리하고 그들을 위해 배경의 위치를 ​​별도로 변경해야합니다.

크롬과 파이어 폭스에서이 기능은 훌륭하게 작동하지만 IE에서는 작동하지 않으며 단일 번호로 작동합니다. 내가 잘못 생각한 이유는 무엇입니까?

Answer 1

이것은 HTML5 데이터 속성에 대한 유용한 사용 사례입니다. jQuery는 이러한 값에 대한 지원을 shimmed하므로 이전 사용자 에이전트에도 도움이됩니다.

HTML 마크 업

<div class="ball ball_energia grande bold"> 
    <div data-position="energia" data-position-value="10%" class="progresso"> 
     10% 
    </div> 
</div> 

주 내가 요소에 넣어 한 data-position-value 속성 :

은 당신이와 끝까지 훨씬 청소기 코드입니다. 또한 data-postition 속성을 포함 시켰지만, 지금은 switch이 전혀 필요하지 않으므로 예제에서는 사용하지 않을 것입니다. 이 코드 블록에서 JavaScript

$('div.progresso').bind('mouseover', function() { 
    var value= $(this).data("position-value"); 
    $(this).stop().animate({ backgroundPosition: "(0px " + value + "px)" }, { duration: 500 }); 

    // for testing, output the value being used 
    $('#display').html(value); 
}); 

, 우리는 data() 방법을 사용하여 오른쪽 소자 오프 원하는 값을 인상하고있다. 그런 다음 일반 스크립트 줄을 사용하여 배경을 원하는 위치로 변경할 수 있습니다.

가 직접보기 : - MDN에 https://developer.mozilla.org/en/HTML/Global_attributes

element.dataset-http://jsfiddle.net/Mrra3/

문서 MDN에

• 글로벌 특성 (data-에 섹션 참조) https://developer.mozilla.org/en/DOM/element.dataset
• jQuery를 data - http://api.jquery.com/data/