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

Question

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

109 Views Asked by markytom At 21 October 2024 at 03:51

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>

Original Q&A

There are 3 best solutions below

**K K** · Answer 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

**SilverSurfer** · Answer 2

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>

**Ajay Thakur** · Answer 3

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>

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

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in CLICK

Related Questions in ONDOUBLECLICK

Trending Questions

Popular # Hahtags

Popular Questions