Question

所以我在学校有一项任务，不知道如何解决它。请帮忙。提供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>

Answer 1

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

Answer 2

我为你做了一个例子，检查一下：

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

Answer 3

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>

如何在jQuery中单击并双击前置，追加和实现颜色切换

3 个答案: