replaceWith不取代？

Question

我正在创建一个评级小部件，这个想法是当用户点击评分时，他的评分和评级明星被替换为投票的数量。这是我的HTML

<div class="row rate_category">
  <div class="large-10 small-12 columns category">
    <p>Quality</p>
  </div>
  <div class="large-12 small-12 rating columns">
    <ul class='star-rating'>
      <li><a href='#' class='one-star'>1</a></li>
      <li><a href='#' class='two-stars rated'>2</a></li>
      <li><a href='#' class='three-stars'>3</a></li>
      <li><a href='#' class='four-stars'>4</a></li>
      <li><a href='#' class='five-stars'>5</a></li>
    </ul>
    <span class="votes">50 Votes</span>
  </div>
</div>

有四个评级类别(质量，内容，唯一性，总体)，他们的html是相同的一个以上。所以我使用这样的replaceWith方法

$(document).ready(function() {
  $("li a.one-star").click(function(event){
    $( this ).replaceWith( $( "span.votes" ) );
  });
});

1. replaceWith方法不替换。它只是把选票数放在了评级明星的首位。

2.由于还有像上面这样的三个html代码块(质量、内容、唯一性和整体)，而且它们都是相同的，那么我如何告诉javascript让它们有所不同(当用户单击质量旁边的评等以进行评分时，他会得到其他类别的质量投票数等等)。

Answer 1

$(document).ready(function(){
  $("ul.star-rating li a").click(function(event){
    event.preventDefault();
    var el = $(this),
        ul = el.closest("ul");

    el.hide();            
    ul.children().not(":first").hide();
    ul.children().filter(":first").append(ul.siblings("span.votes"));
  });

});