Количество отображаемых шрифтов, значков звездочек зависит от значения в столбце базы данных. - PullRequest
Новая
       44

Количество отображаемых шрифтов, значков звездочек зависит от значения в столбце базы данных.

0 голосов
/ 18 марта 2019

Извините, но я новичок в этом.

У меня есть ряд продуктов, которые я хочу отобразить из базы данных.Один из столбцов - рейтинг.

Я хочу знать, как отобразить значение из этого столбца в виде шрифта, а также значки звездочек вместо самого значения.

Значение каждого продукта (от 1 до 5)вводится администратором и отображается как заполненные звездочки для посетителя (x число из 5).Я также хочу показать среднее значение всех продуктов в виде звезд (где одна звезда может быть частично заполнена).

Этот проект использует php и mysqli.

Благодарен за помощь!

1 Ответ

0 голосов
/ 18 марта 2019

Вы можете использовать любой плагин jquery со звездной оценкой: https://phppot.com/jquery/favorite-star-rating-with-jquery/

Style 

li{display: inline-block;color: #F0F0F0;text-shadow: 0 0 1px #666666;font-size:30px;}
.highlight, .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}

HTML 

<input type="hidden" name="rating" id="rating" />
<ul onMouseOut="resetRating();">
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
</ul>

Сценарии 

function highlightStar(obj) {
    removeHighlight();      
    $('li').each(function(index) {
        $(this).addClass('highlight');
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function removeHighlight() {
    $('li').removeClass('selected');
    $('li').removeClass('highlight');
}

function addRating(obj) {
    $('li').each(function(index) {
        $(this).addClass('selected');
        $('#rating').val((index+1));
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function resetRating() {
    if($("#rating").val()) {
        $('li').each(function(index) {
            $(this).addClass('selected');
            if((index+1) == $("#rating").val()) {
                return false;   
            }
        });
    }
}

Демонстрационная ссылка: https://phppot.com/demo/dynamic-star-rating-with-php-and-jquery/

Вам просто нужно динамически изменить это в PHP, вот и все.

Ссылка Вот учебник, чтобы сделать динамический рейтинг звезды: https://phppot.com/jquery/dynamic-star-rating-with-php-and-jquery/

...