Javascript 使用CSS和JS单击按钮后将彩色图像转换为黑白

我有下面的代码。它仅适用于一个图像/页面

有没有可能使转换图像的功能适用于多个图像（每个图像都有自己的按钮），它们都位于同一页面上，就像画廊一样

HTML:

CSS3使用纯CSS3 TechNumber将彩色图像转换为黑白图像
点击这里

CSS:

*{
保证金：0；
填充：0；
边界：0；
} 
正文{
背景：#000；
字体系列：helvetica，“Comic Sans MS”，arial，无衬线；
} 
.容器{
宽度：700px；
保证金：0自动；
} 
.logo{
文本对齐：居中；
} 
康坦特先生{
保证金：0自动；
宽度：300px；
} 
按钮{
宽度：215px；
高度：50px；
利润率：0.10px 35 px；
字体大小：20px；
字体大小：粗体；
光标：指针；
} 
.bwImg{
-webkit过滤器：灰度（100%）；
-moz滤波器：灰度（100%）；
-ms过滤器：灰度（100%）；
-o-过滤器：灰度（100%）；
滤镜：灰度（100%）；
} 

JS:

我不太懂JavaScript，所以请尽可能明确。

使用

过滤器：灰度（100%）

获得它

$（文档）.ready（函数（）{
$（“#转换”）。单击（函数（）{
$（'img'）.css（'filter'，'grayscale（100%））；
})
});

单击此处

可能重复感谢，它比我迄今为止尝试过的任何方法都有效，但它不完整。我在同一页上有多个带有多个按钮的图像；使用u给我的脚本意味着我需要将它相乘，并更改我拥有的每个图像的每个id。我需要一个独特的脚本（为了便于处理和更快的页面加载），它会影响所有图像，但不是在按下一个按钮后同时影响所有图像，一个是在按下与图像匹配的按钮后影响所有图像。我不知道这是否可能，但非常感谢你：）
window.onload = function () {  
  //get elements 
  var f = 1,img = document.getElementById('img'),  
  cvrt = document.getElementById('convert');  
  //button click event 
  cvrt.onclick = function () {  
    if (f) {  
      img.className = "bwImg";  
      f = 0;  
      cvrt.innerHTML = "Convert to Color";  
    } else {  
      img.className = "";  
      f = 1;  
      cvrt.innerHTML = "Convert to B/W";  
    } 
  }; 
}