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”属性，您需要使用“.prop()”，而不是“.attr()”：

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

看似简单的事情，但现在有所作为。

使用仅带有一个参数的“.attr()”来获取值可能是可以的，但即便如此，使用“.prop()”会更好。

编辑——布拉德克里斯蒂正确地指出：

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

于 2011-12-14T21:02:40.193 回答