鼠标悬停星形图标 svg fontawesome答案

【问题标题】：Mouseover star icon svg fontawesome鼠标悬停星形图标 svg fontawesome
【发布时间】：2019-08-10 21:27:46
【问题描述】：

当您将鼠标悬停在星形图标上时，星形的类别应该会发生变化，单击时应该会固定星形的数量。脚本中有错误，不允许这样做。

$('.comment-form-stars [data-fa-i2svg]').on('mouseover', function () {
            var onStar = parseInt($(this).data('value'), 10);
            $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                if (e < onStar) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                } else {
                    $(this).removeClass('fas');
                    $(this).addClass('far');
                }
            });

        }).on('mouseout', function () {
            if (!ratingVal || ratingVal == 0) {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                });
            } else {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    var r = parseInt($(this).data('value'), 10);
                    if (r < ratingVal) {
                        $(this).removeClass('far');
                        $(this).addClass('fas');
                    }
                });
            }
        });

.fa-star {
      color: #f8c31d;
      cursor: pointer;
   }

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="comment-form-stars">
              <i class="fas fa-star" aria-hidden="true" data-value="1"></i>
              <i class="far fa-star" aria-hidden="true" data-value="2"></i>
              <i class="far fa-star" aria-hidden="true" data-value="3"></i>
              <i class="far fa-star" aria-hidden="true" data-value="4"></i>
              <i class="far fa-star" aria-hidden="true" data-value="5"></i>
</div>

【问题讨论】：

标签： svg mouseover font-awesome-5

【解决方案1】：

您尝试在 fontawesome 将它们注入页面之前绑定到图标。通过绑定到父 div 并使用事件委托来避免这种情况，如 here 所述：

$('.comment-form-stars').on('mouseover', '[data-fa-i2svg]', function () {
            var onStar = parseInt($(this).data('value'), 10);
            $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                if (e < onStar) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                } else {
                    $(this).removeClass('fas');
                    $(this).addClass('far');
                }
            });

        }).on('mouseout', '[data-fa-i2svg]', function () {
            if (!ratingVal || ratingVal == 0) {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                });
            } else {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    var r = parseInt($(this).data('value'), 10);
                    if (r < ratingVal) {
                        $(this).removeClass('far');
                        $(this).addClass('fas');
                    }
                });
            }
        });

.fa-star {
      color: #f8c31d;
      cursor: pointer;
   }

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="comment-form-stars">
              <i class="fas fa-star" aria-hidden="true" data-value="1"></i>
              <i class="far fa-star" aria-hidden="true" data-value="2"></i>
              <i class="far fa-star" aria-hidden="true" data-value="3"></i>
              <i class="far fa-star" aria-hidden="true" data-value="4"></i>
              <i class="far fa-star" aria-hidden="true" data-value="5"></i>
</div>

【讨论】：