내 JQuery가 Firefox/Opera에서 작동하지만 Chrome/Safari/IE에서 작동하지 않는 이유는 무엇입니까?

Question

내 페이지의 iframe에 액세스하는 일부 JQuery 코드가 있으며 목록의 사용자 선택에 따라 콘텐츠가 동적으로 변경됩니다. 일부 브라우저에서는 정상적으로 작동하지만 다른 브라우저에서는 정상적으로 작동하지 않습니다.

$(document).ready(function(){ 
    $("#SequentialArt").click(function(){ 
    $("#comicspace").animate({height:400},"slow"); 
    $("#comicspace").html("<iframe id='SAFrame' src='http://www.collectedcurios.com/sequentialart.php' height='400' width='900'></iframe>"); 
    }); 
    $("#XKCD").click(function(){ 
    $("#comicspace").animate({height:600},"slow"); 
    $("#comicspace").html("<iframe src='http://www.xkcd.com' width='900' height='600'></iframe>"); 
    }); 
    $("#Happiness").click(function(){ 
    $("#comicspace").animate({height:600},"slow"); 
    $("#comicspace").html("<iframe src='http://www.explosm.net/comics/' width='900' height='600'></iframe>"); 
    }); 
    $("#Alien").click(function(){ 
    $("#comicspace").animate({height:600},"slow"); 
    $("#comicspace").html("<iframe src='http://alienlovespredator.com/' width='900' height='600'></iframe>"); 
    }); 
}); 


<div id="comic_container"> 
      <select id='comicselector'> 
       <option id='SequentialArt'>Sequential Art</option> 
       <option id='XKCD'>XKCD</option> 
       <option id='Happiness'>Cyanide & Happiness</option> 
       <option id='Alien'>Alien Loves Predator</option> 
      </select> 
      <p id='comicspace'> 
       <img src=<?php bloginfo('stylesheet_directory'); ?>/images/comic_pointer.png /> 
      </p> 
     </div> 

이 코드는 스크립트가 다른 코드와 함께 파일에 -이 다른 코드는 모든 브라우저에서 잘 작동, 그래서 그들은의 .js 파일에 링크 관리하는 다음은 코드입니다. 어떤 아이디어? (이것은이 작동하지 않습니다 사파리, 특히 IE 크롬, 그리고, 반복합니다.)

Answer 1

요소의 change 이벤트에 바인딩을 시도하십시오. 또한 자신의 개체로 변경되는 조각을 인수 분해하여 유사한 코드를 반복하지 않아도됩니다. 이런 식으로 뭔가 :

$('#comicselector').change(function(e){ 
    var content = { 
    XKCD : "<iframe src='http://www.xkcd.com' width='900' height='600'></iframe>", 
    Happiness : "<iframe src='http://www.explosm.net/comics/' width='900' height='600'></iframe>", 
    SequentialArt : "<iframe id='SAFrame' src='http://www.collectedcurios.com/sequentialart.php' height='400' width='900'></iframe>", 
    Alien : "<iframe src='http://alienlovespredator.com/' width='900' height='600'></iframe>" 
    } 
    var which = $(this).find(':selected').attr('id'); // Get id of selected option 
    var iframe = content[which]; 
    var iframeHeight = $(iframe).attr('height'); 
    $("#comicspace") 
    .animate({height: iframeHeight },"slow") 
    .html(iframe); // Get appropriate value from content object 

}); 

편집 : 난 그냥 당신이 각 옵션 요소의 ID를 사용하고 깨달았다. 그에 따라 코드가 변경되었지만 HTML의 값을 사용하지 않는 이유는 무엇입니까?

---

업데이트 :는, 지금 각 iframe을 문자열에서 height 속성의 값을 추출하고있어 귀하의 코멘트에 위로 다음과 같습니다. #comicspace의 높이를 변경하기 위해 그 값을 반복하는 것처럼 보입니다. 따라서 어딘가에 두 번 저장할 이유가 없습니다.

Answer 2

는 일부 브라우저 밖으로 <select> 확인 여기 바이올린 http://jsfiddle.net/v7aMT/

내 <option>의 click 방법을 지원하지 않습니다

change 코드를 주석 처리하면 크롬에서 검색 할 때 외계인 옵션을 클릭해도 아무런 변화가 없음을 알 수 있습니다.

코드를 업데이트하여 change 메서드를 사용하고 $(this).val()을 사용하여 선택한 옵션을 가져온 다음 iframe src에서로드합니다.