Internet Explorer的JQuery问题

Question

我在Wordpress网站（论文主题）中使用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

要从1.6开始使用jQuery设置“ src”属性，您需要使用“ .prop（）”，而不是“ .attr（）”：

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

看起来很简单，但现在有所作为。

仅使用一个参数使用“ .attr（）”来获取值可能是可以的，但是即使那样，您最好使用“ .prop（）”。

编辑 —布拉德·克里斯蒂（Brad Christie）正确地指出了这一点：

               this.src = Image2Thumb;

当您的jQuery对象只是一个元素时（如上面的代码中），效果很好。 如果要设置成千上万个不同的元素，则jQuery表单很有用。

Answer 2

这是您生成的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值的值之一。 不知何故，我认为您生成的网址不正确，或者这些网址上存在图片，或者此网页不适用于像我们这样的局外人（我不确定是哪个）。