Bagaimana untuk Menukar Penilaian Berangka ke Paparan Bintang Menggunakan jQuery dan CSS?

Menukar Penarafan Berangka kepada Paparan Bintang Menggunakan jQuery dan CSS

Soalan ini bertujuan untuk menukar penarafan berangka yang diberikan kepada sistem penarafan bintang dengan maksimum 5 bintang. Dengan memanfaatkan kuasa jQuery, CSS dan imej, kami boleh mencapai perwakilan visual ini dengan cekap.

Pelaksanaan CSS

Buat dua gaya CSS untuk elemen bintang:

span.stars, span.stars span {
    display: block;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

Gaya ini menentukan rentang tahap blok dengan lebar dan ketinggian awal untuk memaparkan bintang.

Imej Sumber

Dapatkan imej bintang yang sesuai dengan lebar yang mewakili penilaian maksimum (dalam kes ini, 5). Pastikan ia menampilkan dua bahagian berbeza: bintang latar belakang dan penilaian bintang sebenar.

Pelaksanaan jQuery

Tentukan pemalam jQuery yang dipanggil bintang:

$.fn.stars = function() {
    return $(this).each(function() {
        var val = parseFloat($(this).html());
        var size = Math.max(0, (Math.min(5, val))) * 16;
        var $span = $('<span></span>').width(size);
        $(this).html($span);
    });
}

Pemalam ini berulang melalui elemen yang dipilih, mengekstrak rating berangka dan menjana elemen span dengan lebar berkadar dengan rating yang diingini. Ia menggantikan nilai berangka asal dengan perwakilan bintang.

Penggunaan HTML

Dalam HTML anda, gunakan kelas bintang pada elemen yang mengandungi penilaian berangka.

<span class="stars">3.8</span>

Penggunaan

Panggil pemalam bintang selepas DOM adalah sedia:

$(function() {
    $('span.stars').stars();
});

Output

Hasilnya akan menjadi perwakilan visual penilaian berangka menggunakan imej bintang yang disediakan. Dengan melaraskan nilai penilaian, anda boleh mengemas kini paparan bintang secara dinamik.

Nota Tambahan

Untuk tujuan kebolehaksesan, adalah dinasihatkan untuk memasukkan nilai berangka sebagai teks tersembunyi atau melalui cara alternatif, memastikan kebolehaksesan untuk pengguna dengan CSS dilumpuhkan.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Penilaian Berangka ke Paparan Bintang Menggunakan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!