Bagaimanakah Saya Boleh Mengubah Nombor menjadi Penarafan Bintang Menggunakan jQuery dan CSS?

Tukar Mana-mana Nombor menjadi Paparan Penilaian Bintang dengan jQuery dan CSS

Mencipta paparan penarafan bintang daripada nilai berangka boleh meningkatkan visualisasi markah semak dan penilaian produk pada tapak web dan aplikasi. Tugas ini boleh dipermudahkan menggunakan gabungan jQuery dan CSS.

Pelaksanaan jQuery dan CSS

Penyelesaian melibatkan penggunaan imej CSS tunggal dan rentang yang dijana secara automatik elemen:

CSS

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

Imej

Nota: Salin imej stars.png ke pelayan anda sendiri dan gunakannya tempatan.

jQuery

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value and ensure it is within 0-5 range
        var val = parseFloat($(this).html());
        val = Math.max(0, (Math.min(5, val)));
        // Calculate star width and create a span holder
        var size = val * 16;
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML

<span>

Penggunaan

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

Penyesuaian

Kepada hadkan bintang kepada saiz separuh atau suku bintang, ubah suai kod JavaScript seperti berikut:

• Separuh bintang: val = Math.round(val * 2) / 2;
• Suku bintang: val = Math.round(val * 4) / 4;

Penjelasan

Skrip mencipta elemen rentang bersarang dengan imej latar belakang sprite bintang. Rentang luar mengandungi bintang kelabu, manakala rentang dalam mengandungi bintang kuning. Dengan melaraskan lebar rentang dalam, bintang kuning mendedahkan bilangan bintang kelabu yang sesuai.

Pertimbangan Kebolehcapaian

Kebolehaksesan boleh dipertingkatkan dengan menyembunyikan nilai berangka di dalam rentang dalam menggunakan text-indent: -9999px;, memastikan ia tersedia untuk bantuan teknologi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Nombor menjadi Penarafan Bintang Menggunakan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!