Как добавлять, добавлять и реализовывать переключение цветов с помощью щелчка и двойного щелчка в jQuery

Question

Как добавлять, добавлять и реализовывать переключение цветов с помощью щелчка и двойного щелчка в jQuery

Итак, у меня есть задание в школе, и я не знаю, как его решить. Пожалуйста, пожалуйста, пожалуйста, помогите. HTML и CSS приведены и не могут быть отредактированы вообще. Все должно быть сделано в JS. Вот задача:

У нас есть список лиц. Нам нужно добавить двух человек в верхней части существующего списка (см. Ниже) и трех человек в нижней части списка. Затем нужно создать два события:

Клик по имени человека должен уменьшить видимость до 20%, щелкнув по нему еще раз, следует вернуть непрозрачность до 100%.

Двойной щелчок должен привести к выделению имени человека зеленым цветом.

<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>

2

jquery click ondoubleclick

Источник

user8782466 16 окт '17 в 06:13

3 ответа

Другие вопросы по тегам jquery click ondoubleclick

user2000051 16 окт '17 в 06:22 2017-10-16 06:22 · Answer 1 · 2017-10-16 06:22

JS:

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

Демо: http://jsfiddle.net/lotusgodkk/GCu2D/2178/

Ссылка: toggleClass dblclick нажмите

1

Источник

user2000051 16 окт '17 в 06:22

user6542186 16 окт '17 в 06:34 2017-10-16 06:34 · Answer 2 · 2017-10-16 06:34

Я сделал для вас пример, проверьте это:

$(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>

user5093834 16 окт '17 в 06:35 2017-10-16 06:35 · Answer 3 · 2017-10-16 06:35

Код JS

$('.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>