與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問題

回答

相關問題