与Internet Explorer的JQuery问题

我在Wordpress站点（论文主题）中使用JQuery来动态交换图像。在Chrome/Firefox/Safari中一切正常，但在IE中完全不显示图像。我哪里错了？代码如下，dev网站daf.drivechannelcreative.com/about。与Internet Explorer的JQuery问题

function add_image_header(){ 
    global $post; 

    $image_header = get_post_meta($post->ID, 'image_header', true); 
    $image_one_full = get_post_meta($post->ID, 'image_one_full', true); 
    $image_one_cropped = get_post_meta($post->ID, 'image_one_cropped', true); 
    $image_two_full = get_post_meta($post->ID, 'image_two_full', true); 
    $image_two_cropped = get_post_meta($post->ID, 'image_two_cropped', true); 
    $image_three_full = get_post_meta($post->ID, 'image_three_full', true); 
    $image_three_cropped = get_post_meta($post->ID, 'image_three_cropped', true); 

    $page_meta_desc = get_post_meta($post->ID, 'thesis_description', true); 

    if($image_header){ 
     ?> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 
       $(".thumb").click(function(){ 
        var Image1Main = $(this).data('main'); 
        var Image1Thumb = $(this).attr('src'); 

        var Image2Main = $('#main_image').attr('src'); 
        var Image2Thumb = $('#main_image').data('thumb'); 

        $('#main_image').attr("src", Image1Main); 
        $('#main_image').data("thumb", Image1Thumb); 


        $(this).attr("src", Image2Thumb); 
        $(this).data("main", Image2Main); 
       }); 
      }); 
      </script> 

      <div id="img_header_container"> 
       <img data-thumb="<?php echo $image_one_cropped;?>" src="<?php echo $image_one_full;?>" id="main_image"/> 
       <img class="thumb" data-main="<?php echo $image_two_full;?>" src="<?php echo $image_two_cropped;?>"/> 
       <div id="heading_text"><h2><?php echo get_the_title($ID) ?></h2><?php echo $page_meta_desc;?></div> 
       <img class="thumb thumb_two" data-main="<?php echo $image_three_full;?>" src="<?php echo $image_three_cropped;?>"/> 
      </div> 
     <?php 
    } 
} 
add_action('thesis_hook_before_post_box', 'add_image_header');

来源

2011-12-14 chris_mac

即使在Chrome中，它们也不会显示出来。 – BZink 2011-12-14 20:59:15

看看呈现的HTML。缺少图像指向不存在的域... http://daf.dev/wp-content/uploads/2011/12/image_two_crop_example1.jpg – BZink 2011-12-14 21:02:26

这一块你生成的HTML的样子：

<img class="thumb" data-main="http://daf.dev/wp-content/uploads/2011/12/image_two_full_example1.jpg" src="http://daf.dev/wp-content/uploads/2011/12/image_two_crop_example1.jpg"/>

在data-main属性的值不是一个工作图像的URL，这就是，你要设置.src的一个值值为您的图片标签。不知怎的，我不认为你正在生成正确的URL，或者图像出现在这些URL上，或者这个网页对于像我们这样的外部人士不起作用（我不确定是哪一个）。

来源

2011-12-14 21:02:40 jfriend00

要设置 “src” 属性与jQuery 1.6以来，你需要使用 “.prop（）”，而不是 “.attr（）”：

   $(this).prop("src", Image2Thumb);

似乎是一个简单的事情但它现在有所不同。

使用“.attr（）”只用一个参数来得到值可能 OK但即使如此，你与“.prop（）”更好。

编辑 —布拉德·克里斯蒂正确地指出，简单地说：当你的jQuery对象仅仅是一个单一的元素（如上面的代码）

   this.src = Image2Thumb;

炒菜锅大。如果你设置了数十亿个不同的元素，jQuery表单非常有用。

来源

2011-12-14 21:00:32 Pointy

与Internet Explorer的JQuery问题

回答

相关问题