Как убрать надпись «undefined»?

Question

[RushV]

Здравствуйте!
На страницы через 5-10 секунд появляется надпись "undefined" как это исправить?


Вот код:

var num = 8; // Число картинок
	var wrapper = 200; // Размер "холста" для расположения картинок
	var radius = 150; // Радиус нашего круга

  $(document).ready(function() {
    for (i = 0; i < num; i++){
    var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
    var top = wrapper + radius * Math.sin(f) + 'px';
    var right = wrapper + radius * Math.cos(f) + 'px';
    $('#wrapper img').eq(i).css({'right':right,'top':top}); // Устанавливаем значения каждой картинке
    }
	$('img').hover(function(){
  	var text = $(this).data('text');
    $('.img-content').html('<h1>' + text + '</h1>');	
  });
});

Comments

[Дмитрий Ким]

А у всех картинок есть атрибут data-text?

[RushV]

да вот:

<div class="col-md-6">
					<div id="wrapper">
						<img src='img/video-pucture.jpg' alt='' data-text="Видеонаблюдение"/>
						<img src='img/skud-pucture.jpg' alt='' data-text="Скуд"/>
						<img src='img/ohran-sig-pucture.jpg' alt='' data-text="Охрана"/>
						<img src='img/slabotochka-pucture.jpg' alt='' data-text="Слаботочка"/>
						<img src='img/fire-sig-pucture.jpg' alt='' data-text="Пожарная сигнализация"/>
						<img src='img/pojarotushenie-pucture.jpg' alt='' data-text="Пожаротушение"/>
						<img src='img/signal-pucture.jpg' alt='' data-text="Оповещение"/>
						<img src='img/teh-pucture.jpg' alt='' data-text="Техработы"/>	
					</div>	
					</div>
				<div class="col-md-6">
					<div class="img-content"></div>
				</div>

Answer 1

[ⓒⓢⓢ]

$('img').hover(function(){
  	var text = $(this).data('text');
    $('.img-content').html('<h1>' + text + '</h1>');	
  });

Этот кусок кода возьмёт все изображения на странице, и каждому назначит обработчик hover
Если спровоцировать ховер на любой другой картинке, то будет как результат undefined ...

Comments

[RushV]

А как это исправить?
Просто обозначить код только к одному блоку?

[ⓒⓢⓢ]

RushV, да, расширить селектор выбора

<div id="wrapper">

такой идентификатор не практично делать, если такой один на странице, то для примера можно так:

$('#wrapper img').hover(function(){
  	var text = $(this).data('text');
    $('.img-content').html('<h1>' + text + '</h1>');	
  });

[RushV]

Блин вот я не подумал я только учу этот язык а это пропустил(
Спасибо большое!

[RushV]

Такой вопрос по вот этому коду:

var num = 8; // Число картинок
	var wrapper = 200; // Размер "холста" для расположения картинок
	var radius = 150; // Радиус нашего круга

  $(document).ready(function() {
    for (i = 0; i < num; i++){
    var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
    var top = wrapper + radius * Math.sin(f) + 'px';
    var right = wrapper + radius * Math.cos(f) + 'px';
    $('#wrapper img').eq(i).css({'right':right,'top':top}); // Устанавливаем значения каждой картинке
    }
  });

Вот это значение определяет размер холста

var wrapper = 200; // Размер "холста" для расположения картинок

Можно как то центрировать этот блок картинок?

[ⓒⓢⓢ]

не знаю, тут много нюансов есть и заканчивая стилями.
какой вид будет если var wrapper = 150; ?

[RushV]

Вот такой:

[ⓒⓢⓢ]

RushV, выходит переменная wrapper должна равняться ширине блоку. ~250
если не выйдет, смотри стили этого блока и подстраивай