Question

我需要在jQuery中制作评分系统（我点击一个圆圈而不是之前的圆圈变成绿色）。

如果我点击空白圆圈，该圆圈和之前的圆圈将变为绿色。

如果我在输入框中写下圈数而不是点击“更新最大值”按钮，那么我得到所需的圈数，但如果我之后点击其中一个圈子，它们就不会变为绿色，即使他们有一个班级rating-circle。

为什么会这样？

我把我的代码放在下面。

$(function() {
  
  //this function is drawing circles
  var makingCircles = function(numberOfStars) {
    $("#rating-container").empty();
    for (let i = 0; i < numberOfStars; i++)
      $('<div class="rating-circle"></div>').appendTo('#rating-container');
  }

  var chosenGrade = null;

  var numberOfStars = $("#rating-container").attr("max-value");

  makingCircles(numberOfStars); // this is for initial drawing of circles

  $("#update-max-value").on("click", function() {
    numberOfStars = $("#max-value").val();
    makingCircles(numberOfStars);
  });


  $(".rating-circle").click( // this function is for rating
    function() {
      chosenGrade = $(this);
      chosenGrade.addClass("rating-chosen");
      chosenGrade.prevAll().addClass("rating-chosen");
    });
});

body {
  font-family: Verdana;
}

h1,
h2,
h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0.3em;
  padding: 0.1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<h2>Finding elements using jQuery</h2>
<div>This session is about identifying elements using jQuery methods and selectors.</div>

<h3>Rate this session</h3>
<div id="rating-container" max-value="5">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <label for="max-value">Enter max value:</label>
  <input type="text" id="max-value" />
  <button type="button" id="update-max-value">Update max value</button>
</div>

Answer 1

使用事件委托：

$("#rating-container").on("click", ".rating-circle",

而不是

$(".rating-circle").click(

这是对新/动态创建的HTML元素进行事件绑定的方法，而动态我正在讨论使用javascript创建的HTML元素。

Answer 2

应该而不是

$(".rating-circle").click(

这样：

$("#rating-container").on("click",".rating-circle",

因为否则每次重新填充容器时都必须绑定click事件处理程序

在按下其他按钮后，为什么'click'功能在jQuery中不起作用？

2 个答案: