鼠标悬停星形图标 svg fontawesome
Mouseover star icon svg fontawesome
当您将鼠标悬停在星形图标上时,星形的 class 应该会发生变化,点击后,星形的数量应该会固定。脚本中有错误不允许这样做。
$('.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>
您尝试在 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>
当您将鼠标悬停在星形图标上时,星形的 class 应该会发生变化,点击后,星形的数量应该会固定。脚本中有错误不允许这样做。
$('.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>
您尝试在 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>