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")); 
    }); 

});