Bagaimanakah Saya Boleh Menjana Penarafan Bintang Secara Dinamik daripada Input Berangka Menggunakan jQuery dan CSS?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-12-14 15:39:21

asal

805 orang telah melayarinya

How Can I Dynamically Generate Star Ratings from Numerical Input Using jQuery and 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;

Salin selepas log masuk

}

span.stars span {

background-position: 0 0;

Salin selepas log masuk

}

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);
});

Salin selepas log masuk

}

HTML:

2.6545344
8

Penggunaan:

$(fungsi () {

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

Salin selepas log masuk

});

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!