Internet Explorer 的 JQuery 问题答案

【问题标题】：JQuery Issue with Internet ExplorerInternet Explorer 的 JQuery 问题
【发布时间】：2011-12-14 20:55:41
【问题描述】：

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

【问题讨论】：

即使在 Chrome 中也不会为我显示。
查看呈现的 HTML。缺少的图像指向一个不存在的域...daf.dev/wp-content/uploads/2011/12/image_two_crop_example1.jpg
404 错误与您的编程方式无关。
是的，当我将网站移动到新服务器时，我丢失了链接。这总是容易的事。谢谢大家。

标签： jquery wordpress internet-explorer-8 wordpress-thesis-theme

【解决方案1】：

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

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

看似简单的事情，现在却大有不同。

使用“.attr()”和一个参数get 值是可能好的，但即使那样你最好使用“.prop()” .

edit — Brad Christie 正确地指出：

               this.src = Image2Thumb;

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

【讨论】：

就个人而言，我更喜欢使用this.src，因为无论如何它都会是一个 DOM 图像，但这可能是首选。

【解决方案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 值的值之一。不知何故，我认为您生成的 URL 不正确，或者图像出现在这些 URL 中，或者该网页不适用于像我们这样的外人（我不确定是哪一个）。

【讨论】：