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，现在我想获取所有具有i的{{1}}，就像我有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>

Answer 2

嗨，您可以使用此代码段获取当前单击的i元素的所有同级并添加选择的i计数以获得所有选定的i元素的数量

$(this).siblings('i.fa.fa-star').length + 1

jQuery-用fa fa-star计算i的数量

2 个答案: