Internet ExplorerでのJQueryの問題

Question

私はWordpressサイト（Thesisテーマ）でJQueryを使用して、画像を動的に交換しています。 Chrome/Firefox/Safariではすべてが正常に機能しますが、IEでは画像が表示されません。どこが間違っていたのですか？以下のコード、devサイト：daf.drivechannelcreative.com/about。

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'); 

Answer 1

これは以下のようにあなたの生成されたHTMLの部分が見えるものです：data-main属性の値は、作業画像のURLではありません、それはあなたが.srcを設定しようとしている値の一つだ

<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"/> 

イメージタグの値をtoに設定します。どういうわけか、私はあなたが正しいURLを生成しているとは思わない、またはそれらのURLに画像が存在するか、このWebページは私たちのような外部者（私はどちらか分かりません）では動作しません。

Answer 2

1.6以来、jQueryを使って "SRC" 属性を設定するには、あなたが ".prop（）" ではなく ".ATTRを（）" を使用する必要があります。

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

は単純なことのように思えます今は違いがあります。

使用「.ATTR（）」に一つだけの引数では、値はおそらく OK ですが、でも、あなたは「.prop（）」との方がいいでしょうを取得します。

編集 —ブラッド・クリスティーが正しく指摘単にその：あなたのjQueryオブジェクトは、（上記のコードのように）1つだけの要素があるとき

   this.src = Image2Thumb; 

中華鍋素晴らしいです。 jQueryフォームは、何百もの異なる要素を設定する場合に便利です。