[英]Change CSS of some <li> inside <ul> with 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>
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');
});
});
我刚刚创建了一个带有以下调整的小提琴 :
$('#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-您似乎在小提琴的js面板的开头使用了因为我没有找到将其包含为外部资源的在线资源。 调整后的代码位于js面板末尾的注释/* stack code start */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.