Bagaimanakah Saya Boleh Menjana Penarafan Bintang Secara Dinamik daripada Input Berangka Menggunakan jQuery dan CSS?

Menukar Nombor menjadi Paparan Penarafan Bintang Menggunakan jQuery dan CSS

Dalam bidang paparan penarafan, mengubah nilai berangka menjadi penarafan bintang adalah cabaran bersama. Bagaimanakah kita boleh menjana penilaian bintang secara dinamik berdasarkan input berangka menggunakan jQuery dan CSS?

Penyelesaian:

Berikut ialah penyelesaian inovatif yang memanfaatkan satu imej dan CSS:

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:

Imej tunggal (bintang.png) dengan bintang kuning di bahagian atas dan bintang kelabu di bawah.

jQuery:

$.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 />').width(size);
    $(this).html($span);
});

}

HTML:

2.6545344
8

Penggunaan:

$(fungsi () {

$('span.stars').stars();

});

Output:

Penyelesaian ini menggunakan sprite CSS untuk menggabungkan kedua-dua kuning dan bintang kelabu menjadi satu imej, membolehkan kami mengawal lebar bintang kuning untuk mewakili yang diingini penilaian.

Kelebihan:

• Mudah dan ringan.
• Menyokong penilaian bintang pecahan.
• Menggunakan CSS untuk mengawal penampilan bintang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Penarafan Bintang Secara Dinamik daripada Input Berangka Menggunakan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!