Форум

рони · #11 (**permalink**) 15.05.2013, 02:25

Сообщение от djonA

только для определенного div скажем с id="test"

$("body div") => $("#test")
для медитации => Селекторы

FaustL · #12 (**permalink**) 02.02.2014, 15:21

Всем привет.
А если у меня рейтинг имеет вот такой вид:
<div id="1">2,3</div>
<div id="2">3,3</div>
То есть не целое число.
Если использовать пример выше, то выводится вот так:

,

Как этого избежать? (Сделать рейтинг целым числом - не предлагать)

рони · #13 (**permalink**) 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 · #14 (**permalink**) 03.02.2014, 08:15

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

Сообщение от FaustL

А если у меня рейтинг имеет вот такой вид:
<div id="1">2,3</div>

Значит ваш рейтинг не нормальный. Нормальный рейтинг всегда находится в пределах от 0 до 1.

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

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

FaustL · #15 (**permalink**) 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 то Плохое

рони · #16 (**permalink**) 06.02.2014, 19:33

FaustL,

<!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 · #17 (**permalink**) 06.02.2014, 19:49

Супер! Спасибо!

Jimmi · #18 (**permalink**) 07.03.2014, 11:41

Сообщение от animhotep

http://biznesguide.ru/demo/vote/
http://biznesguide.ru/demo/vote/jquery.rating.zip

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

Форум

Справочник

Discord чат

Курсы javascript