1

Wordpressサイト（論文テーマ）でJQueryを使用して、画像を動的に交換しています。Chrome / Firefox / Safariではすべてが期待どおりに機能しますが、IEでは画像がまったく表示されません。どこが間違っているのですか？以下のコード、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');
4

2 に答える 2

1

1.6以降のjQueryで「src」属性を設定するには、「。attr（）」ではなく「.prop（）」を使用する必要があります。

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

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

値を取得するために引数を1つだけ指定して「.attr（）」を使用することはおそらく問題ありませんが、それでも「.prop（）」を使用する方がよいでしょう。

編集— Brad Christieは、次のことを正しく指摘しています。

               this.src = Image2Thumb;

jQueryオブジェクトが（上記のコードのように）単一の要素である場合は、すばらしい中華なべです。jQueryフォームは、無数の異なる要素を設定する場合に役立ちます。

于 2011-12-14T21:00:32.620 に答える
0

生成された 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、画像タグの値を設定する値の 1 つです。どういうわけか、正しい URL を生成していないか、それらの URL に画像が存在するか、この Web ページが私たちのような部外者には機能しないと思います (どちらかはわかりません)。

于 2011-12-14T21:02:40.193 に答える