Question

我正在处理愿望清单，每个项目都有心形图标，现在我想显示在愿望清单中添加的项目总数。正确的方法是什么？

$(function() {
  $('body').on('click', '.fav-icon', function() {
    var icon = $(this);
    var icon_fa_icon = icon.attr('data-prefix');

    if (icon_fa_icon === "far") {
      icon.attr('data-prefix', 'fas');

      $('.search-list-box .fav-icon').each(function() {
        var fasLength = $(this).attr('data-prefix', 'fas');
        var wishlistDiv = +$(fasLength).length;
        $('.wishlist_count sup').text(wishlistDiv);
      });
    } else {
      icon.attr('data-prefix', 'far');
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>

<div>
  <span class="wishlist_count">
    <i class="far text-orange fa-heart"></i>
    <sup>0</sup>
  </span>
</div>
<hr>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>

Answer 1

部分问题在于这些行：

var fasLength = $(this).attr('data-prefix', 'fas');
var wishlistDiv = +$(fasLength).length;

第一行将所有元素的data-prefix属性设置为fas，以便在单击时都将其全部选中。在选择所有元素时，计数是错误的。要解决此问题，您需要使用属性选择器：

var fasLength = $('[data-prefix="fas"]').length;

最后，当取消选择某项时，您还需要修改所选项目的计数，因此计数逻辑应在if条件之外运行。该计算也不需要each()循环。

完整的逻辑将如下所示：

$(function() {
  $('body').on('click', '.fav-icon', function() {
    var $icon = $(this).attr('data-prefix', function(i, v) {
      return v == 'far' ? 'fas' : 'far';
    });

    var fasLength = $('[data-prefix="fas"]').length;
    $('.wishlist_count sup').text(fasLength);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>

<div>
  <span class="wishlist_count">
    <i class="far text-orange fa-heart"></i>
    <sup>0</sup>
  </span>
</div>
<hr>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
  <i class="fav-icon far fa-heart text-orange"></i>
</div>

如何知道单击时选择了多少类元素？

1 个答案: