Question

我有一些JQuery代码可以访问我页面上的iframe，并根据列表中的用户选择动态更改内容。这适用于某些浏览器，但不适用于其他浏览器。这是代码：

$(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文件。有任何想法吗？（重复一遍，特别是Chrome，IE和Safari，它不起作用。）

Answer 1

某些浏览器不支持click中<option>的{{1}}方法在这里查看这个小提琴http://jsfiddle.net/v7aMT/

如果您注释掉<select>代码，则会在Chrome浏览器中单击外来选项时看到没有任何反应。

我会更新代码以使用change方法，然后使用change获取所选选项，然后从中加载iframe src。

Answer 2

尝试绑定change元素的<select>事件。您还可以通过将更改为自己对象的片段分解来避免重复类似的代码。像这样：

$('#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的高度，所以没有理由将它存储在某个地方两次。

为什么我的JQuery在Firefox / Opera中工作，而不是Chrome / Safari / IE？

2 个答案: