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.由于还有3个以上的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"));
  });

});