javascript - JQuery - 用 fa fa-star 计算 i 的数量

Question

$(function() {
  $(".rate i").css('cursor', 'pointer');
  $(".rate i").click(function() {
    $(this).add($(this).prevAll("i")).removeClass("fa-star-o").addClass("fa-star");
    $(this).nextAll("i").removeClass("fa-star").addClass("fa-star-o");
    console.log($(this).closest('.rate').data('target') + ': ' + $('input[name="' +     $(this).closest('.rate').data('target') + '"]').val());
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Rate Us:

<div class="row rate" data-target="form-rate-instructor">
  <div class="col-md-6">
    <label>Instructors: </label>
  </div>
  <div class="col-md-6">
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star-o text-info"></i>
    <i class="fa fa-star-o text-info"></i>
  </div>
  <input type="hidden" name="form-rate-instructor" value="3">
</div>
<div class="row rate" data-target="form-rate-surrounding-environment">
  <div class="col-md-6">
    <label>Surrounding Environment: </label>
  </div>
  <div class="col-md-6">
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star-o text-info"></i>
    <i class="fa fa-star-o text-info"></i>
  </div>
  <input type="hidden" name="form-rate-surrounding-environment" value="3">
</div>

我有费率的代码片段，我希望每次费率的值发生变化时，隐藏的目标输入也会发生变化，加载时的默认值为 3，所以我也将 3 放在隐藏的 input，现在我想获取所有具有 fa fa-star 的 i 就像我有 2 个 fa fa-star 只有目标输入上的值也会更改。我将如何做到这一点？

Answer 1

添加以下代码

$($(this).parent().parent().find("input")[0]).val($(this).parent().find(".fa-star").length)

$(function() {
  $(".rate i").css('cursor', 'pointer');
  $(".rate i").click(function() {
    $(this).add($(this).prevAll("i")).removeClass("fa-star-o").addClass("fa-star");
    $(this).nextAll("i").removeClass("fa-star").addClass("fa-star-o");
    $($(this).parent().parent().find("input")[0]).val($(this).parent().find(".fa-star").length)
    console.log($(this).closest('.rate').data('target') + ': ' + $('input[name="' + $(this).closest('.rate').data('target') + '"]').val());
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Rate Us:

<div class="row rate" data-target="form-rate-instructor">
  <div class="col-md-6">
    <label>Instructors: </label>
  </div>
  <div class="col-md-6">
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star-o text-info"></i>
    <i class="fa fa-star-o text-info"></i>
  </div>
  <input type="hidden" name="form-rate-instructor" value="3">
</div>
<div class="row rate" data-target="form-rate-surrounding-environment">
  <div class="col-md-6">
    <label>Surrounding Environment: </label>
  </div>
  <div class="col-md-6">
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star text-info"></i>
    <i class="fa fa-star-o text-info"></i>
    <i class="fa fa-star-o text-info"></i>
  </div>
  <input type="hidden" name="form-rate-surrounding-environment" value="3">
</div>