jQuery不透明度不起作用

Posted 2023-05-09

【中文标题】jQuery不透明度不起作用

【英文标题】：jQuery opacity not working

【发布时间】：2012-11-04 18:58:25

【问题描述】：

单击红色按钮后，我正在尝试更改图像的不透明度 而不是添加不同的图像，我不应该在新图像上看到红色按钮

我的 JS 代码如下。

http://jsfiddle.net/mwPeb/7/

<script>
    $(document).ready(function () 
        $(".specialHoverOne").hover(function () 
            //  alert("i am here");
            $(".ctaSpecialOne").css("visibility", "visible");

        ,

        function () 
            $(".ctaSpecialOne").css("visibility", "hidden");
        );

        $(".ctaSpecialOne").click(function (e) 
            alert("clicked");
            e.preventDefault();
            //$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");                
            $(this).css(
                'opacity': 50
            );

        );

    );
</script>

【参考方案1】：

我会花一些时间来清理这里的编码，找到任何东西有点困难，而且结构有点难以理解。

如果我的理解正确，我相信这是您需要在点击红色按钮时使红色按钮上方的图像更改不透明度的行。

$(this).parent().prev().prev().css('opacity':.5);

更具体地说；

$(".ctaSpecialOne").click(function (e) 
  e.preventDefault();            
  $(this).parent().prev().prev().css('opacity':.5);
);

http://jsfiddle.net/mwPeb/11/

【讨论】：

+1 用于 DOM 遍历。更有理由清理代码并传入需要不透明度的 ID。

@douglas：感谢您的回复，我正在尝试接收这种不透明度docs.google.com/open?id=0B5pgxrT9wSU7bUx0Ql9sOVFzb0E

@douglas：我们可以让红色按钮在添加图像后完全隐藏...因为鼠标悬停后我再次看到红色按钮

您可以在不透明度更改后添加$(this).remove(); 以完全删除红色链接。我想这就是你想要的？

@DouglasA.Crosby：感谢它的工作，但我还有另一个疑问，我正在尝试接收这种不透明度 docs.google.com/open?id=0B5pgxrT9wSU7bUx0Ql9sOVFzb0E，当前图像上有一个方框图像如何成功了

【参考方案2】：

您希望在点击时更改红色按钮的不透明度？还是上面的图？对于初学者，要设置不透明度，您可以更改行：

$(this).css('opacity':50);

到：

$(this).css( opacity: 0.5 );

在您当前的小提琴中，您会看到设置了红色按钮的不透明度。如果你想让它设置别的东西，你现在有了语法。

更新： 与其连接一堆重复相同代码的 .click() 事件，不如创建一个函数

function setThisOpacity(id) 
    $("#" + id).css( opacity: 0.5 );
    //do other stuff if you need to

然后在您的 html 标记中，添加一个 onclick="setThisOpacity(someID);"，其中 someID 是您要设置不透明度的项目的实际 ID。

【讨论】：

@ethom10：感谢您的回复我想更改图像的不透明度

@ethom：感谢您的回复，但我无法看到更改jsfiddle.net/mwPeb/10 我添加了 id 和 js imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg" class="封面">