javascript - 使用 jquery 更改 内某些 的 CSS

Question

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

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

我的问题:如何更改 ul 内某些 li 的 CSS？在这种情况下，不透明度为 0.1 的 li 必须变成黑色和白色。我只能更改所有的 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>

JQUERY

$( document ).ready(function() {
    $('ul li img').transition({
        opacity: 0.1,
        delay: 500
    }).on('click', function () {
        $(this).closest("ul").find("img").transition({ opacity: 0.1, delay: 500 });
        $(this).closest('li').prevUntil().addBack().find('img').css('opacity', '1');
    });
    $('#click1').on('click', function(){
        $('ul#people').clone(true).appendTo('ul#people2');
        **$('ul#people2 li img').css('opacity', '0');**
        $(this).off('click');
    });
    $('#click2').on('click', function(){
        $('ul#people2').clone(true).appendTo('ul#people3');
        $(this).off('click');
    });
});

Answer 1

我刚刚创建了一个Fiddle进行以下调整:

$('#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);
}

对于这种黑白效果，我刚刚使用了此处采用的方法:http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS并将 SVG 图像添加到 HTML。也许有更好的解决方案，但仅作为示例。

我还添加了完整的transition.js - https://github.com/peteboere/jquery-transition/blob/master/jquery.transition.js - 你似乎在 Fiddle 的 js 面板的开头使用，因为我没有找到将其作为外部资源包含在内的在线资源。您调整后的代码位于js面板末尾注释/* stack code start */

下方