Форум

Iktash · #1 (**permalink**) 18.01.2013, 11:23

Есть задача с помощью jquery превращать число в соответствующее количество звездочек и дополнять пустыми. Написал такой код:

$(document).ready(function (){
   var k = $('.star').html();
   var star = '';
   for (var i = 0; i < k; i++) {
   star =star + "<img src='/img/description/full_star.jpg' />";
    } 
   for (var i = k; i < 5; i++) {
   star =star + "<img src='/img/description/empty_star.jpg' />";
    } 
   alert(star);
   $('.star').html("begin"+star+"end");

   });

Алерт работает дважды. Выводит сначала то, что нужно( 5 тегов img), затем выводит пусто. В итоге на странице в нужных местах просто beginend . Подскажите, пожалуйста, что я делаю не так. Почему alert дважды работает?

Iktash · #2 (**permalink**) 18.01.2013, 11:29

С двойным алертом разобрался: случайно этот скрипт 2 раза подключал. переписал этот кусок так:

alert(star);
   $('.star').html("begin"+star+"end");
   alert(star);

Оба раза алерт нужное выводит, но в нужное место все равно beginend выводит.

ОлегА · #3 (**permalink**) 18.01.2013, 11:54

Если у вас на странице несколько классов star, то по хорошему их надо тоже складывать в массив и выполнить это код для каждого star, возможно ошибка у вас из-за этого
У меня работает нормально, единственное, что бы исправил это

star +="<img src='/img/description/full_star.jpg' />";

так ведь проще и нагляднее, и то же самое

рони · #4 (**permalink**) 18.01.2013, 12:08

Iktash,

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$(".star").each(function(indx, element){
var k =  +$(element).html();
var star = '';
for (var i = 0; i < 5; i++) {
star +=i < k ? "<img src='http://javascript.ru/forum/images/smilies/dance3.gif' />":"<img src='http://javascript.ru/forum/images/smilies/agree.gif' />";
 }
$(element).html(star)
});
});
</script>
</head>
<body>
<div id = '1' class = 'star'>1</div>
 <div id = '2' class = 'star'>2</div>
 <div id = '4' class = 'star'>3</div>
 <div id = '5' class = 'star'>4</div>
 <div id = '7' class = 'star'>5</div>
</body>
</html>

Iktash · #5 (**permalink**) 18.01.2013, 12:09

Олег, я попробовал сделать только один div с id="star" . Переписал вот так:

$(document).ready(function (){
   var k = $('#star').html();
   var star = '';
   for (var i = 0; i < k; i++) {
   star += "<img src='/img/description/full_star.jpg' />";
    } 
   for (var i = k; i < 5; i++) {
   star += "<img src='/img/description/empty_star.jpg' />";
    } 
   $('#star').html(star);
   });

Все равно пусто выводит. В чем еще может быть косяк? Алерт в этом же месте все выводит верно. Если вместо html ставить text, то выводить теги img прямо на страницу. Видимо я не правильно понимаю функцию .html
Прошу помощи. Заранее спасибо.

Iktash · #6 (**permalink**) 18.01.2013, 12:21

Рони, спасибо огромное. Ваш код работает. Как, Вы наверное догадались - я полный новичек в js (2 недели занимаюсь). Был бы очень благодарен, если бы Вы пояснили в чем именно моя ошибка была. Я честно не очень понял, когда выполняется $(function(){ - это не то же самое, что $(document).ready(function (){ ??

рони · #7 (**permalink**) 18.01.2013, 12:30

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

$(function(){ - это не то же самое, что $(document).ready(function (){ ??

тоже самое

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

var k = $('.star').html();

выведет содержание только первого элемента с классом star -- чтобы узнать значения всех элементов с классом star нужно их все перебрать функция each

Форум

Справочник

Discord чат

Курсы javascript