[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Как организовать цикл??? JQuery
mayorua
Здравствуйте, увжаемые!

Из цикла на PHP формируются id определенных блоков. И я должен уловит на какой из блоков навел мышь юзер - и сделать его видимым.
Проблема в том, что блоков много, их число будет расти...

Как код ниже, сделать в цикле... ?????

$(function() {
$("#i1")
.
mouseover(function() {
$("#t1").show();
})
.
mouseout(function() {
$("#t1").hide();
});
});

$(function() {
$("#i2")
.
mouseover(function() {
$("#t2").show();
})
.
mouseout(function() {
$("#t2").hide();
});
});

...


$(function() {
$("#i1000")
.
mouseover(function() {
$("#t1000").show();
})
.
mouseout(function() {
$("#t1000").hide();
});
});


Просветите пожалуйста...
Спасибо!



Спустя 9 часов, 57 минут, 54 секунды (9.09.2012 - 01:33) Oyeme написал(а):
Накидал для Вас.

$(document).ready(function() {
$('.block').mouseover(function() {
$('#data_'+ $(this).data('id')).show();
}).mouseout(function() {
$('#data_'+ $(this).data('id')).hide();
});
})


<span class="block" data-id="1"> hover this </span>
<span
id="data_1">show 1</span>

<span
class="block" data-id="2"> hover this </span>
<span
id="data_2">show 2</span>

<span
class="block" data-id="3"> hover this </span>
<span
id="data_3">show 3</span>

Спустя 8 часов, 29 минут, 5 секунд (9.09.2012 - 10:02) redreem написал(а):
var index = 0, iEl, tEl;

while (true) {

iEl = $('#i' + ++index);

if (iEl.length == 0) break;

tEl = $('#t' + index);

(
function(el){

iEl.mouseover( function(){ el.show(); } ).mouseout( function(){ el.hide() } );

})(tEl);

};


если элементов действительно много, ну там больше сотни, то вариант на чистом js будет раз в 100 быстрее отрабатывать навешивание функций на мышку:

var index = 0, iEl, tEl;

while ( (iEl = document.getElementById('i' + ++index)) != null ) {

tEl = document.getElementById('t' + index);

(
function(el){

iEl.onmouseover = function(){ el.style.display = 'block'; };
iEl.onmouseout = function(){ el.style.display = 'none'; };

})(tEl);

};
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.