javascript - 使用 jquery 向子元素添加 2 个内联样式

Question

我想添加一个基于点击的内联样式：

CSS：

div#ProductImages > img
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

div#ProductImages > img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

因此，当他们单击其中一个子图像图标时，不透明度为 1.0

这是我尝试过的：

$("div#ProductImages > img").click('style', 'opacity: 1.0', 'filter:alpha(opacity=100)');

哪个似乎不起作用？

Answer 1

尝试这个：

$("div#ProductImages > img").click(function(){
    $(this).addClass('newClassName'); 
});

和CSS是：

.newClassName{
   opacity:1.0;
   filter:alpha(opacity=100); 
}

Answer 2

$("div#ProductImages > img").click( function() {
    $(this).css('opacity' , '1.0');
});

Answer 3

你可以尝试使用这个：

$("div#ProductImages > img").click(function(){
    $(this).css({'opacity':'1.0'});
});

Answer 4

正如其他人所建议的那样，最好使用具有所需属性的类，然后在必要时添加/删除它。还值得注意的是，在您的问题中，CSS 指的是hover，但 JavaScript 指的是click. 对于这个演示，我将使用hoverjQuery 提供更好的事件处理程序。

CSS

div#ProductImages > img
{
    opacity: 0.4;
    filter: alpha(opacity=40);
}

div#ProductImages > img:hover,
div#ProductImages > img.onHover
{
    opacity: 1.0;
    filter: alpha(opacity=100);
}

JavaScript（使用 jQuery）

$('div#ProductImages > img').hover(function()
{
    $(this).addClass('onHover');
}, function()
{
    $(this).removeClass('onHover');
});