js实现简单的星级选择器提交效果适用于评论等

下面是详细的攻略：

JS实现简单的星级选择器提交效果

1. HTML部分

首先，需要在HTML中添加星级选择器的结构，一般是通过多个图标或文字来表示不同的星级：

<div class="star-rating">
  <span class="star" data-star="1">&#9733;</span>
  <span class="star" data-star="2">&#9733;</span>
  <span class="star" data-star="3">&#9733;</span>
  <span class="star" data-star="4">&#9733;</span>
  <span class="star" data-star="5">&#9733;</span>
</div>

这里使用了一个div元素作为星级选择器的容器，内部包含了5个span元素作为星级图标或文字，每个span元素都有一个data-star属性表示对应的星级。

同时，在HTML中还需要添加一个用于显示当前选择的星级的元素，一般是一个隐藏的input元素：

<input type="hidden" name="rating" id="rating" value="">

2. CSS部分

为了让星级选择器看起来更加美观，需要对其进行一定的样式设置。例如，可以使用CSS将星级图标变成黄色、灰色交替的效果，以及设置鼠标移动到某个星级图标上时，显示高亮效果：

.star {
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
}
.star.yellow {
  color: #ffc107;
}
.star:hover,
.star:hover ~ .star {
  color: #ffc107;
}

3. JS部分

最后，使用JS实现星级选择器的交互效果和提交数据的功能。

首先，需要用JS获取到所有的星级图标元素，监听它们的鼠标事件，以及获取用于显示当前选择的星级的元素：

var stars = document.querySelectorAll('.star');
var ratingInput = document.getElementById('rating');

然后，添加鼠标事件监听函数，实现当鼠标点击某个星级图标时，将该图标以及之前的所有图标变成黄色，同时更新当前选择的星级的值：

stars.forEach(function(star) {
  star.addEventListener('click', function() {
    var rating = this.getAttribute('data-star');
    for (var i = 0; i < stars.length; i++) {
      if (i < rating) {
        stars[i].classList.add('yellow');
      } else {
        stars[i].classList.remove('yellow');
      }
    }
    ratingInput.value = rating;
  });
});

这样，就完成了星级选择器的交互效果和提交数据的功能。

4. 示例说明

以下是两个示例说明：

示例1：基本使用

在评论区中添加星级选择器，在提交评论时将星级一并提交。

实现步骤：

1. 首先在HTML中添加星级选择器和用于显示当前选择的星级的元素。

2. 在CSS中添加星级选择器的样式。

3. 在JS中添加星级选择器的交互效果和提交数据的功能。

最终代码如下：

HTML：

<div class="star-rating">
  <span class="star" data-star="1">&#9733;</span>
  <span class="star" data-star="2">&#9733;</span>
  <span class="star" data-star="3">&#9733;</span>
  <span class="star" data-star="4">&#9733;</span>
  <span class="star" data-star="5">&#9733;</span>
</div>
<input type="hidden" name="rating" id="rating" value="">

CSS：

.star {
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
}
.star.yellow {
  color: #ffc107;
}
.star:hover,
.star:hover ~ .star {
  color: #ffc107;
}

JS：

var stars = document.querySelectorAll('.star');
var ratingInput = document.getElementById('rating');
stars.forEach(function(star) {
  star.addEventListener('click', function() {
    var rating = this.getAttribute('data-star');
    for (var i = 0; i < stars.length; i++) {
      if (i < rating) {
        stars[i].classList.add('yellow');
      } else {
        stars[i].classList.remove('yellow');
      }
    }
    ratingInput.value = rating;
  });
});

示例2：动态生成

根据后端返回的数据动态生成星级选择器，在提交时将星级一并提交。

实现步骤：

1. 发送ajax请求，从后端获取需要生成的星级数量。

2. 根据返回的数量动态生成星级选择器和用于显示当前选择的星级的元素。

3. 在CSS中添加星级选择器的样式。

4. 在JS中添加星级选择器的交互效果和提交数据的功能。

最终代码如下：

HTML：

<div id="star-container"></div>
<input type="hidden" name="rating" id="rating" value="">

CSS：

.star {
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
}
.star.yellow {
  color: #ffc107;
}
.star:hover,
.star:hover ~ .star {
  color: #ffc107;
}

JS：

var starContainer = document.getElementById('star-container');
var ratingInput = document.getElementById('rating');
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var starsCount = parseInt(this.responseText);
    for (var i = 1; i <= starsCount; i++) {
      var star = document.createElement('span');
      star.classList.add('star');
      star.setAttribute('data-star', i);
      star.innerHTML = '&#9733;';
      starContainer.appendChild(star);
    }
    var stars = document.querySelectorAll('.star');
    stars.forEach(function(star) {
      star.addEventListener('click', function() {
        var rating = this.getAttribute('data-star');
        for (var i = 0; i < stars.length; i++) {
          if (i < rating) {
            stars[i].classList.add('yellow');
          } else {
            stars[i].classList.remove('yellow');
          }
        }
        ratingInput.value = rating;
      });
    });
  }
};
xmlhttp.open('GET', 'stars.php', true);
xmlhttp.send();

这样，就可以根据后端返回的数据动态生成星级选择器，以及实现交互效果和提交数据的功能。