使用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。对于本演示，我将使用hover在jQuery中提供更好的事件处理程序。

的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');
});