replaceWith不替换吗? [英] replaceWith doesn't replace?

问题描述

我正在创建一个评分小部件，其想法是当用户单击评分时，他的评分和评分星标将替换为投票数.这是我的HTML

I am creating a rating widget and the idea is when a user clicks to rate, he rates and the rating stars are replaced with the number of votes. Here is my 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方法

There are four rating categories (Quality,Content,Uniqueness,Overall) and the html for them is the same as the one above. So I am using replaceWith method like this

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

1. replaceWith方法不会替代.它只是将投票数放在评级明星的最上方.

1.The replaceWith method doesn't replace. It just puts the number of votes on top of the rating stars.

2.由于还有3个以上的html代码块(质量，内容，唯一性和整体)，并且它们都是相同的，因此我如何告诉javascript有所作为(当用户点击评分时)在质量旁边加星标，以便他进行评分(对他进行评分)，获得质量投票的票数，等等.)

2.Since there are 3 more html code blocks like the one above(quality,content,uniqueness and overall) and they are all the same, how do i tell javascript to make a difference(when a user clicks on the rating stars next to quality so he can rate(he rates), he gets the number of votes for quality and so on for the other categories).

推荐答案

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

});

这篇关于replaceWith不替换吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！