CODEWITHSUNDEEP
javascriptjqueryhtmlonclickclick
Gilko
Gilko

Reputation: 2387

Change CSS of some <li> inside <ul> with jquery

First part is to click on an image. That image and the images who preceed that image get the opacity of 1. The rest of the images stay at opacity 0.1.

Second part is when you click on "click one". It duplicates the whole . But the images that have opacity 0.1 should be in black and white and they should be unclickable.

My question: How do I change the CSS of some li inside a ul? In this case the li that have the opacity of 0.1 have to become in black and white. I'm only able to change all the li's. How can I disable the images that will be in black and white, so that they aren't clickable anymore?

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

Upvotes: 1

Views: 323

Answers (1)

matthias_h
matthias_h

Reputation: 11416

I've just created a Fiddle with following adjustments:

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

For this black and white effect I've just used the approach taken from here: http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS and added an SVG image to the HTML. There maybe better solutions, but just as example.

I've also added the complete transition.js - https://github.com/peteboere/jquery-transition/blob/master/jquery.transition.js - you seem to use at the beginning of the js-panel of the Fiddle as I didn't find an online source for including it as external resource. Your adjusted code is at the end of the js panel below the comment /* stack code start */

Upvotes: 1

Related Questions