Javascript 更改某些的CSS<；李>；内部<；ul>；使用jquery

第一部分是单击图像。该图像和在该图像前面的图像的不透明度为1。其余图像的不透明度保持在0.1

第二部分是当您单击“单击一个”时。它复制了整体。但是不透明度为0.1的图像应该是黑白的，并且它们应该是不可读取的

我的问题：如何更改ul中某些li的CSS？在这种情况下，不透明度为0.1的li必须变为黑白。我只能改变所有的李。如何禁用黑白图像，使其不再可单击

HTML

<ul id="people">
    <li><img src="person.jpg" alt="person" id="img1"></li>
    <li><img src="person.jpg" alt="person" id="img2"></li>
    <li><img src="person.jpg" alt="person" id="img3"></li>
    <li><img src="person.jpg" alt="person" id="img4"></li>
    <li><img src="person.jpg" alt="person" id="img5"></li>
    <li><img src="person.jpg" alt="person" id="img6"></li>
    <li><img src="person.jpg" alt="person" id="img7"></li>
    <li><img src="person.jpg" alt="person" id="img8"></li>
    <li><img src="person.jpg" alt="person" id="img9"></li>
    <li><img src="person.jpg" alt="person" id="img10"></li>
</ul>

<ul id="people2"></ul>

<ul id="people3"></ul>

<div id="click1">click one</div>
<div id="click2">click two</div>

我刚刚创建了一个具有以下调整的：

$('#click1').on('click', function(){
   $('ul#people').clone(true).appendTo('ul#people2');
   $("ul#people2 li img[style^='opacity: 0']").addClass('blackWhite').off("click");
});

CSS:

.blackWhite{
   filter: grayscale(100%);
   filter: url(#greyscale);
   filter: gray;
   -webkit-filter: grayscale(1);
}

对于这种黑白效果，我刚刚使用了以下方法： 并将SVG图像添加到HTML中。也许有更好的解决方案，但只是举个例子

我还添加了完整的transition.js——您似乎在Fiddle的js面板的开头使用它，因为我没有找到将其作为外部资源的在线来源。调整后的代码位于js面板的末尾，位于注释

/*堆栈代码开始*/

下方。使用

$（“ul li”）.eq（index）

选择所需的

li

。

.blackWhite{
   filter: grayscale(100%);
   filter: url(#greyscale);
   filter: gray;
   -webkit-filter: grayscale(1);
}