javascript - 在 JQuery/Javascript 中运行 CSS

Question

我的网页有一些问题。我有四个使用 CSS 进行灰度化的不同图像。我创建了一个 .svg 文件来实现这一点。现在我想要的是每当用户单击图像时，灰度过滤器将被禁用，显示原始颜色。但是css只有:active和:hover。我想要的是在点击期间。这是我的代码：

//CSS
<style type="text/css">
 #main, #beverage, #set, #appetizer {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
#main {
filter: none;
-webkit-filter: grayscale(0);
}

//IMAGES
<td>
<img src="main.png" width="80" style="cursor:pointer" id="main"><br>
<img src="beverage.png" width="80" style="cursor:pointer" id="beverage"><br>
<img src="set.png" width="80" style="cursor:pointer" id="set"><br>
<img src="set.png" width="80" style="cursor:pointer" id="appetizer"><br>
</td>

Answer 1

您可以简单地使用灰度过滤器设置一个类，并在单击图像时将其删除

HTML

<img src="main.png" width="80" style="cursor:pointer" id="main" class="grayscale"><br>
<img src="beverage.png" width="80" style="cursor:pointer" id="beverage" class="grayscale"><br>
<img src="set.png" width="80" style="cursor:pointer" id="set" class="grayscale"><br>
<img src="set.png" width="80" style="cursor:pointer" id="appetizer" class="grayscale"><br>

CSS

.grayscale {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

jQuery

$('.grayscale').click(function(){
    $(this).removeClass('grayscale');
});

Answer 2

$('#id').css('key' , 'value');

Answer 3

覆盖点击处理程序中的 CSS：

$("#main, #beverage, #set, #appetizer").click(function() {
    $(this).css({ filter: "none",
                  "-webkit-filter": "grayscale(0)"
                });
}

Answer 4

$('img.#main, img#beverage, img#set, img#appetizer').click(function(){
    $(this).css({
        '-webkit-filter': '',
        'filter': ''
    })
});

Answer 5

keep z-index also with this class for more perfect work without any future errors:

.grayscale {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
    z-index:100;
}
and then use click function :

$('.grayscale').click(function(){
    $(this).removeClass('grayscale');
});