无法理解这样的jQuery代码

Question

我新的网络开发和我指以下链路

tic tac toe javascript

请分别在下面找到JS，CSS和HTML文件。

我们没有带class = “选择”，但仍项目运行完美

$(".level").each(function() { 
 
    var $this = $(this); 
 
    $this.click(function() { 
 
    $('.selected').toggleClass('not-selected'); 
 
    $('.selected').toggleClass('selected'); 
 
    $this.toggleClass('not-selected'); 
 
    $this.toggleClass('selected'); 
 
    ai.level = $this.attr("id"); 
 
    }); 
 
});

.level { 
 
    margin: 0 15px; 
 
    color: lightskyblue; 
 
    cursor: pointer; 
 
} 
 

 
.not-selected { 
 
    opacity: 0.5; 
 
    text-decoration:none; 
 
} 
 

 
.not-selected:hover { 
 
    opacity:1; 
 
}

<div class='difficulty'> 
 
    <span class='level not-selected' id="blind">Blind</span> 
 
    <span class='level not-selected' id="novice">Novice</span> 
 
    <span class='level not-selected' id="master">Master!</span> 
 
</div>

任何元素，我无法理解这个js。

请清除我的两个疑惑 - 1.在每个2.how中点击使用。在jquery中选择工作 该代码段将不起作用，因为我没有添加jquery。

Answer 1

切换行为 - 如果元素有一个类，该类将被删除。如果该元素没有获得该类，则该类将被添加。在这种情况下，没有使用.select类的元素，但会在toggleClass（'selected'）执行后添加。我为你评论每一条js行。

$(".level").each(function() { // for each element with class .level 
    var $this = $(this); // save the current jQuery object in the loop in the $this variable 
    $this.click(function() { // add a click event to the current object 
     $('.selected').toggleClass('not-selected'); // for the elements with .selectd class toggle .not-selectd class 
     $('.selected').toggleClass('selected'); // for the elements with .selectd class toggle .selectd class 
     $this.toggleClass('not-selected'); // for the current elements toggle .not-selectd class 
     $this.toggleClass('selected'); // for the current elements toggle .selectd class 

     ai.level = $this.attr("id"); // ai not defined in current context, will give an error, but if was defined you would save current element id in ai.level 
    }); 
}); 

此代码可以写得更容易，也可以做同样的事情。你不需要.selected类，因为没有风格它的CSS

$(".level").click(function(){ // click event for elements with class .level 
 
    $(".level").addClass("not-selected"); // add .not-selected class to all .level elements 
 
    $(this).removeClass("not-selected"); // remove not-selected class from the CURRENT clicked element 
 
});

.level { 
 
    margin: 0 15px; 
 
    color: lightskyblue; 
 
    cursor: pointer; 
 
} 
 

 
.not-selected { 
 
    opacity: 0.5; 
 
    text-decoration:none; 
 
} 
 

 
.not-selected:hover { 
 
    opacity:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='difficulty'> 
 
    <span class='level not-selected' id="blind">Blind</span> 
 
    <span class='level not-selected' id="novice">Novice</span> 
 
    <span class='level not-selected' id="master">Master!</span> 
 
</div>

编辑二人意见：

点击1.使用内部的每个

在你的情况下，你正在获取对象$（“。level”）并遍历它们。在循环内部，您将为当前元素分配一个单击事件侦听器。这是不需要的，你可以做$('.level').click(function(){});迭代。

如何.selected jQuery中

工作这仅仅是一个HTML类没有特殊的行为。你可以通过它来管理元素。你可以使用任何你想要的课程，如.my-super-class-name并使用它。这只是一个HTML属性。