Question

以下适用于FF，Chrome和Safari：

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().fadeTo("slow", 0.30);
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

但不是在IE8中（我甚至没有在7及更早版本中测试过。）

如何在IE8中实现此功能？

修改：根据热门请求，这里是HTML：

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

    <div style="clear:both"></div>

    <div id="edit-image-nav">
        <div id="add_comment"><img src="images/comment-icon.png" /></div>
        <div id="like"><img src="images/paint-icon.png" /></div>
        <div id="delete_img"><img src="images/delete-icon.png" /></div>
    </div>

请注意，当你点击'edit-image-nav'div中的一个图标（它们叠加在UL on above onHover上的图像上）时会发生什么，它具有不同的功能。对于其他图标，它的工作原理。但是对于#delete_img，它没有。

Answer 1

在您的代码中似乎不是错误，但如果它确实无效，请尝试以下操作：


$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().parent().children("img").fadeTo("slow", 0.30, function() {
                   $(this).css('opacity', 0.3);
            } );
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

Answer 2

图片不能是父版（因此不太可能），因此您的选择器是错误的。如果没有相关的HTML代码段，很难说它应该是什么，但您可能想尝试（如果您的删除按钮距离要删除的目标两个级别，这将有效）：

$(this).parent().parent().find("img").fadeTo("slow", 0.30);

图像上的fadeTo方法适用于IE8。如果这不起作用，请发布您的HTML。

否则请确保您的img标签指定了高度和宽度，否则IE将不会对元素应用不透明度更改，因为它“没有布局” - 有关详细说明，请参阅http://www.satzansatz.de/cssd/onhavinglayout.html。

如何在IE中更改图像的不透明度？ - jQuery，CSS

2 个答案: