[英]JQuery Issue with Internet Explorer
I'm using JQuery in a Wordpress site (Thesis theme) to dynamically swap images. 我在Wordpress网站(论文主题)中使用JQuery来动态交换图像。 Everything works as expected in Chrome/Firefox/Safari, but the images don't show up at all in IE.
一切都可以在Chrome / Firefox / Safari中正常运行,但是图像在IE中根本无法显示。 Where have I gone wrong?
我哪里出问题了? Code below, dev site at daf.drivechannelcreative.com/about .
以下代码位于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');
To set the "src" attribute with jQuery since 1.6, you need to use ".prop()", not ".attr()": 要从1.6开始使用jQuery设置“ src”属性,您需要使用“ .prop()”,而不是“ .attr()”:
$(this).prop("src", Image2Thumb);
Seems like a simple thing but it makes a difference now. 看起来很简单,但现在有所作为。
Using ".attr()" with just one argument to get the value is possibly OK but even then you're better off with ".prop()". 仅使用一个参数使用“ .attr()”来获取值可能是可以的,但是即使那样,您最好使用“ .prop()”。
edit — Brad Christie correctly points out that simply: 编辑 —布拉德·克里斯蒂(Brad Christie)正确地指出了这一点:
this.src = Image2Thumb;
woks great when your jQuery object is just a single element (like in the code above). 当您的jQuery对象只是一个元素时(如上面的代码中),效果很好。 The jQuery form is useful if you're setting a zillion different elements.
如果要设置成千上万个不同的元素,则jQuery表单很有用。
This is what a piece of your generated HTML looks like: 这是您生成的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"/>
The value in the data-main
attribute is not a working image URL and that's one of the values that you're going to set the .src
value to for your image tag. data-main
属性中的值不是有效的图像URL,这是您要为图像标签设置.src
值的值之一。 Somehow, I don't think you're generating the right URLs or the images are present at those URLs or this webpage doesn't work for outsiders like us (I'm not sure which). 不知何故,我认为您生成的网址不正确,或者这些网址上存在图片,或者此网页不适用于像我们这样的局外人(我不确定是哪个)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.