Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   перевод числа в рейтинг (звезды) (https://javascript.ru/forum/misc/37917-perevod-chisla-v-rejjting-zvezdy.html)

djonA 13.05.2013 23:05
перевод числа в рейтинг (звезды)
 
подскажите как перевести числа в кол-во звезд (рейтинг)

есть числа от 1 до 5. мне надо в зависимости от того какое число выводить от 1 до 5 звезд.

Подскажите как такое можно сделать малой кровью?

animhotep 13.05.2013 23:40
найти готовое решение

djonA 13.05.2013 23:54
что то не могу найти готовое может не правильно ищу. Можно ссылочку на такой вариант готового

animhotep 14.05.2013 00:01
http://biznesguide.ru/demo/vote/
http://biznesguide.ru/demo/vote/jquery.rating.zip

djonA 14.05.2013 00:39
тут идет именно полноценный рейтинг а мне просто надо перевод из цифр в звезды.

Т.е если <div id="1">1</div> - вывести 1 звезду
если <div id="2">2</div> - 2 звезды

ну и т.д до 5 звдезд

qwerty-клавиатура 14.05.2013 01:15
http://x9a.ru/samples/stars.htm

рони 14.05.2013 01:17
djonA,
:write:
Вариант )))
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
$.fn.replaceText = function (e, f, g) {
       return this.each(function () {
           var a = this.firstChild,
               c, b, d = [];
           if (a) {
               do 3 === a.nodeType && (c = a.nodeValue, b = c.replace(e, f), b !== c && (!g && /</.test(b) ? ($(a).before(b), d.push(a)) : a.nodeValue = b));
               while (a = a.nextSibling)
           }
           d.length && $(d).remove()
       })
   };   $(window).load(function () {
   $("body div").replaceText( /\d+/gi, function f(a)
{
return Array(++a).join('<img src="http://javascript.ru/forum/images/smilies/tongue.gif" alt="">')
} );
    });
  </script>
<title></title>
</head>
<body>
 Т.е если <div id="1">1</div> - вывести 1 звезду
 если <div id="2">2</div> - 2 звезды
</body>
</html>

ruslan_mart 14.05.2013 09:44 
<div id="rating"></div>

var elem = '', rating = 5; //Колличество звёзд
for(i=0;i<rating;i++) elem += '<img alt="" src="изобрежение звёзды" />';
document.getElementById('rating').innerHTML = elem;

djonA 14.05.2013 10:32
Спасибо все супер работает

djonA 14.05.2013 23:06
Цитата:
Сообщение от рони (Сообщение 250344)
djonA,
:write:
Вариант )))
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
$.fn.replaceText = function (e, f, g) {
       return this.each(function () {
           var a = this.firstChild,
               c, b, d = [];
           if (a) {
               do 3 === a.nodeType && (c = a.nodeValue, b = c.replace(e, f), b !== c && (!g && /</.test(b) ? ($(a).before(b), d.push(a)) : a.nodeValue = b));
               while (a = a.nextSibling)
           }
           d.length && $(d).remove()
       })
   };   $(window).load(function () {
   $("body div").replaceText( /\d+/gi, function f(a)
{
return Array(++a).join('<img src="http://javascript.ru/forum/images/smilies/tongue.gif" alt="">')
} );
    });
  </script>
<title></title>
</head>
<body>
 Т.е если <div id="1">1</div> - вывести 1 звезду
 если <div id="2">2</div> - 2 звезды
</body>
</html>
Вот этот код идеально работает только можно что бы его применять только для определенного div скажем с id="test"

А не для всей страницы как сейчас.

рони 15.05.2013 02:25
Цитата:
Сообщение от djonA
только для определенного div скажем с id="test"
$("body div") => $("#test")
для медитации => Селекторы

FaustL 02.02.2014 15:21
Всем привет.
А если у меня рейтинг имеет вот такой вид:
<div id="1">2,3</div>
<div id="2">3,3</div>
То есть не целое число.
Если использовать пример выше, то выводится вот так:
:) :) ,:) :) :)
Как этого избежать? (Сделать рейтинг целым числом - не предлагать)

рони 02.02.2014 16:38
Цитата:
Сообщение от FaustL
То есть не целое число.
в теме есть примеры смотрите 4 пост ...
или вариант
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8" />
<style type="text/css">
div.hide{
  background: url(http://javascript.ru/forum/images/smilies/tongue.gif);
  height: 20px;
 }

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
$(window).load(function () {
       $("body div").html(function () {
           var num = $(this).html()
           num = +$.trim(num).replace(",", ".") * 20;
           $(this).addClass('hide').width(num)
           return ''
       })
   });  </script>
<title></title>
</head>
<body>
<div id="1">2,3</div>
<div id="2">3,3</div>
</body>
</html>

kostyanet 03.02.2014 08:15
Если цифры рейтинга падают в страницу не с кондачка, то значит в том месте где они берутся надо заменить цифры на картинки и не сношать себе моск подвигами Херакла.

Цитата:
Сообщение от FaustL
А если у меня рейтинг имеет вот такой вид:
<div id="1">2,3</div>
Значит ваш рейтинг не нормальный. Нормальный рейтинг всегда находится в пределах от 0 до 1.

На который вешается то или иное представление: звезды, бары, пироги, графы и тп.

Например rating_star() знает где картинка со звездами, какого она размера и сколько занимает 1 звезда. Все что остается сделать это вернуть element с фоном из звезд и шириной в пикселях равной вычисленному количеству звезд на ширину звезды. Или инвариант: вернуть элемент фиксированной ширины в который фон задвинут на Х пикселов которые ест произведение ширины звезды на количество звезд.

FaustL 06.02.2014 18:43
kostyanet рейтинг парсится.
рони и Дзен-трансгуманист спасибо вам.
У меня возник новый вопрос, как на основе этого всего приписывать слова?
Допустим рейтинг стоит 4,5(рейтинг от 1 до 5) и хотелось бы, чтобы выглядело вот так:
<style>
.mark{background: #A8D12E;
border-radius: 2px;
color: #FFFFFF;
display: block;
float: right;
font-family: "Roboto", "Arial";
font-size: 26px;
font-weight: 100;
height: 50px;
line-height: 31px;
margin-left: 2px;
position: relative;
text-align: center;
width: 60px;}
span.title { 
background: rgba(0, 0, 0, 0.102);
bottom: 0px;
display: block;
font-size: 12px;
font-weight: 300;
height: 18px;
left: 0px;
line-height: 16px;
position: absolute;
right: 0px;
text-align: center;
width: 100%;
}
</style>
<body>
<div class="mark">
  8.7
  <span class="title">Отлично</span>
</div>

Или вот картинка
вот картинка:


Если 5, то Лучшее
если 4-4,9 то Отлично
если 3-3,9 то Хорошо
если 2-2,9 то Не очень
если 1-1,9 то Плохое

рони 06.02.2014 19:33
FaustL,
:write: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<style>
.mark{background: #A8D12E;
border-radius: 2px;
color: #FFFFFF;
display: block;
float: right;
font-family: "Roboto", "Arial";
font-size: 26px;
font-weight: 100;
height: 50px;
line-height: 31px;
margin-left: 2px;
position: relative;
text-align: center;
width: 60px;}
span.title {
background: rgba(0, 0, 0, 0.102);
bottom: 0px;
display: block;
font-size: 12px;
font-weight: 300;
height: 18px;
left: 0px;
line-height: 16px;
position: absolute;
right: 0px;
text-align: center;
width: 100%;
}
</style>

<body>
<div class="mark">0</div>
<div class="mark">0.75</div>
<div class="mark">1.33</div>
<div class="mark">2.5</div>
<div class="mark">3.8</div>
<div class="mark">4.4</div>
<div class="mark">4.9</div>
<div class="mark">5</div>
<script>
   var rus = ['Плохо', 'Не очень', 'Хорошо', 'Отлично', 'Лучшее'];
   var stars = [2, 3, 4, 5];
   [].forEach.call(document.querySelectorAll('.mark'), function (mark) {
       var span = document.createElement('span'),
           num = +mark.firstChild.nodeValue,
           str = '';
       for (var i = 0; i < stars.length; i++) {
           if (num < stars[i]) break
       }
       str = rus[i];
       span.className = 'title';
       span.appendChild(document.createTextNode(str))
       mark.appendChild(span);;
   });
</script>
</body>


</body>

</html>

FaustL 06.02.2014 19:49
Супер! Спасибо!

Jimmi 07.03.2014 11:41
Цитата:
Сообщение от animhotep (Сообщение 250338)

Скачал себе зип, во время нажатия на звездочку-оценку, картинка прогрузки - "ajax-loader" - не останавливается прогружаться, как на примере (на сайте). Почему так?


Часовой пояс GMT +3, время: 18:44.