jQuery选择器陷阱：解决多类名元素点击事件不触发问题

// 错误的jQuery选择器
$('.fa fa-star').click(function(){
    console.log('click'); // 此行代码将不会执行
    // ... 其他逻辑 ...
});

// 正确的jQuery选择器
$(document).ready(function() { // 确保DOM加载完成后执行
    $('.fa.fa-star').click(function(){
        var i = $(this).index();
        console.log('点击了第 ' + (i + 1) + ' 颗星'); // 现在点击事件可以正确触发

        // 移除当前评分组件中所有星星的选中状态
        $(this).parent().find('.fa-star').removeClass('checked');

        // 为当前点击的星及其之前的所有星添加选中状态
        $(this).prevAll('.fa-star').addBack().addClass('checked');
    });
});

@extends('frontend.layouts.master')

@section('title', 'Feedback')

@section('content')
<!-- page header  -->
<div class="page-header">
    <div class="container-fluid">
        <div class="page-title">
          Feedback Time!
        </div>
    </div>
    <img src="{{asset('frontend/assets/images/Group%20910.png')}}" alt="">
</div>

<!-- Feedback Form -->
<div class="feedback-form">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <form action="" method="post">
                    @csrf
                    <div class="form-group">
                        <div class="rating-box">
                            <h3>How was your experience?</h3>
                            <div class="stars">
                                <i id="star1" class="fa fa-star"></i>
                                <i id="star2" class="fa fa-star"></i>
                                <i id="star3" class="fa fa-star"></i>
                                <i id="star4" class="fa fa-star"></i>
                                <i id="star5" class="fa fa-star"></i>
                            </div>
                          </div>
                    </div>

                    <div class="form-group">
                        <label for="feedback">Additional Feedback</label>
                        <textarea class="form-control" name="feedback" id="feedback" rows="5"></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit Feedback</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('frontend/assets/js/jquery.min.js')}}" ></script>
<script src="{{asset('frontend/assets/js/bootstrap.bundle.min.js')}}" ></script>
<script src="{{asset('frontend/assets/js/owl.carousel.min.js')}}"></script>
<script src="{{asset('frontend/assets/js/wow.min.js')}}"></script>
<script src="{{asset('frontend/assets/js/main.js')}}"></script>
<script>
$(document).ready(function() {
    // 绑定点击事件到所有同时拥有 'fa' 和 'fa-star' 类的元素
    $('.fa.fa-star').click(function(){
        var i = $(this).index(); // 获取当前点击星星的索引 (从0开始)
        console.log('点击了第 ' + (i + 1) + ' 颗星');

        // 移除当前评分组件中所有星星的选中状态
        // 使用 $(this).parent().find('.fa-star') 确保只影响当前评分框内的星星
        $(this).parent().find('.fa-star').removeClass('checked');

        // 为当前点击的星及其之前的所有星添加 'checked' 类
        // .prevAll() 获取所有前面的同级元素，.addBack() 将当前元素也包含进来
        $(this).prevAll('.fa-star').addBack().addClass('checked');
    });

    // 如果需要，可以在页面加载时根据某个初始值设置星级
    // 例如，从一个隐藏字段获取初始评分
    // var initialRating = $('#hiddenRatingValue').val();
    // if (initialRating && initialRating > 0) {
    //     $('.stars i:lt(' + initialRating + ')').addClass('checked');
    // }
});
</script>
@endpush

.rating-box {
    padding: 25px 50px;
    background-color: #f1f1f1;
    border-radius: 25px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}
.rating-box h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}
.rating-box .stars {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: center; /* 使星星居中 */
}
.stars i {
    font-size: 35px;
    color: #b5b8b1; /* 未选中状态的颜色 */
    transition: all 0.2s;
    cursor: pointer;
}
.stars i:hover {
    color: #0077b5; /* 鼠标悬停时的颜色 */
}
.stars i.checked { /* 选中状态的颜色和效果 */
    color: #ffb851;
    transform: scale(1.2);
}