Question

我是网络开发的新手，我指的是以下链接 -

请分别在下面找到js，css和html文件。

我们没有任何带有class =“selected”的元素，但仍然项目运行良好

$(".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.selected工作中点击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(){});迭代即可。

如何在jquery中选择工作

这只是一个没有特殊行为的HTML类。您可以按类管理元素。您可以使用任何您想要的类.my-super-class-name并使用它。它只是一个HTML属性。

无法理解这个jquery代码

1 个答案: