how to prepend, append and implement color switching with click and doubleclick in jQuery

Question

So I have a task at school and have no idea how to solve it. Please please please help. HTML and CSS are given and cannot be edited at all. Everything needs to be done in JS. Here is the task:

We have a list of persons. We need to add two persons to the top of the existing list (see below), and three persons to the bottom of the list. Then, need to create two events:

A click on a person's name should decrease visibility to 20%, clicking it one more time should return the opacity to 100%.

A double click should result in highlighting a person's name with a green color.

<style>     
    .persons li { list-style-type: none; opacity: 1; }
    .persons li a { color: black; text-decoration: none; }
    .persons li.closed { opacity: 0.2; }
    .persons li.alt a { color: green; } 
</style>

<html>
    <head></head>
    <body>
        <ul class="persons">    
            <li><a href="#">Tom</a></li>
            <li><a href="#">Jerry</a></li>  
       </ul>    
    </body>
</html>

Tip: try click,dblclick event in jQuery. Toggle closed, alt classes in the event handler respectively. — K K, Oct 16 '17 at 06:18
In summary, this is the solution: $(document).ready(function() { $(".persons").prepend("

score 1 · Answer 1 · answered Oct 16 '17 at 06:22

1

JS:

$(document).ready(function() {
  $(document).on("click", ".persons li", function() {
    $(this).toggleClass("closed");
  });
  $(document).on("dblclick", ".persons li", function() {
    $(this).toggleClass("alt");
  });
});

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2178/

Reference: toggleClass dblclick click

answered Oct 16 '17 at 06:22

K K

17,794
4
30
39

Thanks, this would be great, except that I still need to add persons before and after. I tried using prepend and append, but then your code does not work on the newly added persons. Could you please suggest the rest of the solution? – markytom Oct 16 '17 at 16:05

SilverSurfer · Answer 2 · 2017-10-16T17:44:34.337

0

I made a example for you, check this:

$(document).ready(function(){
    $(".persons").prepend("<li><a href='#'>First person before</a></li><li><a href='#'>Second person before</a></li>")
    $(".persons").append("<li><a href='#'>First person after</a></li><li><a href='#'>Second person after</a></li><li><a href='#'>Third person after</a></li>")
    
  $(document).on("click", ".persons > li > a", function(e) {
     $(e.target).parent().toggleClass("closed");
  });
        
  $(document).on("dblclick", ".persons > li", function(e) {
     $(e.target).parent().toggleClass("alt");
  });
      
});

.persons li { list-style-type: none; opacity: 1; }
.persons li a { color: black; text-decoration: none; }
.persons li.closed { opacity: 0.2; }
.persons li.alt a { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<ul class="persons">        
        <li><a href="#">Tom</a></li>
        <li><a href="#">Jerry</a></li>  
</ul>

</body>

edited Oct 16 '17 at 17:44

answered Oct 16 '17 at 06:34

SilverSurfer

4,281
6
24
50

do $(e.target).css('opacity', 1); instead of $(e.target).css('opacity', '0.0'); – Ajay Thakur Oct 16 '17 at 06:38
@SilverSurfer - your solution seems to be the correct one. Thank you so much! – markytom Oct 16 '17 at 16:11
@SilverSurfer, I have just noticed that you modified the CSS. You made it .persons li a.closed { opacity: 0.2; } .persons li a.alt{ color: green; } instead of: .persons li.closed { opacity: 0.2; } .persons li.alt a { color: green; } The task is to leave the CSS as is, without changing anything there. Could you please fix it? – markytom Oct 16 '17 at 16:50
@markytom Sorry but the css needs to be changed to works properly for dynamically generated content – SilverSurfer Oct 16 '17 at 17:09
Hmmm, that's not good then :( The lecturer said there is a solution without changing html and css. – markytom Oct 16 '17 at 17:12
If I use: $(this).toggleClass("closed"); instead of: $(e.target).toggleClass("closed"); then it works, colors and opacity switch, but it applies not to individual student, but 3 students at a time. Anything you can do to fix that? – markytom Oct 16 '17 at 17:22
Im looking for, If I get it I will leave a comment ^^ – SilverSurfer Oct 16 '17 at 17:26
I think I found it! $(".persons").prepend(...); instead of $(".persons > li").prepend(...); – markytom Oct 16 '17 at 17:35
@markytom Yeah you were right, selector was wrong, so now I added parent() method to the target it works fine with your css – SilverSurfer Oct 16 '17 at 17:45
Glad to help you, could you please mark this answer as accepted to help other users? Green tick is on the left of the answer – SilverSurfer Oct 16 '17 at 18:51

score 0 · Answer 3 · answered Oct 16 '17 at 06:35

JS Code

$('.persons li a').click(function(){
var me = $(this);
if(me[0].classList.contains('reduceOpacity')==false){
   me.css('opacity','.2');
   me.addClass('reduceOpacity');
}else{
   me.css('opacity',1);
   me.removeClass('reduceOpacity');
}

});

$(".persons li").dblclick(function() {
    $(".persons li").removeClass('alt')
    $(this).addClass("alt");
 });

.persons li { list-style-type: none; opacity: 1; }
    .persons li a { color: black; text-decoration: none; }
    .persons li.closed { opacity: 0.2; }
    .persons li.alt a { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>

<ul class="persons">        
        <li><a href="#" class="sadsad">Tom</a></li>
        <li><a href="#">Jerry</a></li>  
</ul>

</body>
</html>

Thanks as well, but this is also incomplete. Adding new persons does not work, and also on "Tom" - can't get back to regular black color. — markytom, Oct 16 '17 at 16:07

how to prepend, append and implement color switching with click and doubleclick in jQuery

3 Answers3