Question

单击产品页面侧面的每个缩略图将切换big_image以正常显示该图像。适用于Internet Explorer 9或更低版本以外的任何设备。虽然没有看到任何直接原因。我正在测试使用Internet Explorer的开发工具模拟v9及以下，因为我没有安装它们。有些人以前说他们没有问题，但是我和第二个＆amp; IE的第三台电脑肯定也有。

实时网址：http://bit.ly/1bEfjYf

<?php if ($thumb || $images) { ?>
<div class="left">
  <div class="image-additional">
    <a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="side_thumb" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a>

    <?php foreach ($images as $image) { ?>
    <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"><img class="side_thumb"  src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
    <?php } ?>
  </div>
</div>
<div id="big_image">
    <img width="320" height="320" name="main" src="<?php echo $popup; ?>" alt="">
</div>
<?php } ?>

的JavaScript

$('.side_thumb').click(function(e){
    e.preventDefault();
    console.log($(e.currentTarget).parent('a').attr('href'));
    $("#big_image").html($('<img width="320" height="320">').attr("src", $(e.currentTarget).parent('a').attr('href')));
    //$("#big_image").prop('src',$(e.currentTarget).attr('href'));
})

Answer 1

只需使用this来定位处理程序中的图像

$('.side_thumb').click(function(e){
    e.preventDefault();
    console.log($(this).parent('a').attr('href'));
    $("#big_image").html('<img width="320" height="320" src="'+$(this).parent('a').attr('href')+'">');
})

Answer 2

在IE的某些版本中，在打开Developer Tools之前，console对象不存在，这通常会导致Heisenbugs无法正常工作，然后打开Dev Tools以查看原因并开始工作

在IE8上测试您的网站，似乎是这种情况，我的左下角有“console未定义”错误，因此请尝试删除对console.log的调用。< / p>

IE 9及更低版本不切换缩略图

2 个答案: