2009-11-27 2 views
1

У меня есть около 6 элементов div с тем же классом. Когда я нажимаю любую из них, я хочу показать рядом с ними еще один div.Как создать общий идентификатор ссылки с jQuery

Я собираюсь дать им все id формы id = "mydiv-divname", где mydiv всегда будет постоянным.

Как я могу ссылаться на элементы mydiv- *. Я не могу найти точный синтаксис, но я думаю, что это должно быть что-то вроде $ ("# mydiv -" [*]), где * представляет какой-то шаблон.

+0

Извините, это был довольно глупый вопрос. – Ankur

ответ

3

Какую цель идентификатор служить? Если все они помечены с тем же именем класса, вы можете получить доступ к ним все по классам:

`$(".className")... 

Чтобы вызвать событие, когда один из этих элементов колебались, используйте

`$(".className").hover(...) 

Обратите внимание, что функции в пределах hover() будет запускаться только для элемента, который на самом деле парит.

Они делают что-то подобное тому, что вы пытаетесь достичь here - замирание один элемент или на парении (из многих элементов на странице, помеченной этого класса)

+0

Но я хочу иметь доступ к каждому индивидуально – Ankur

+0

ok попробует его сейчас – Ankur

2

Почему вы не можете просто использовать класс в селекторе вместо идентификатора, как в

jQuery('.commonClass');

+0

Затем, когда я навешиваю один из элементов с классом = "commonClass", все элементы с этим классом заканчиваются тем, что новый div отображается справа. – Ankur

+0

Я мог ошибаться - я не уверен, что именно означает ваше решение. – Ankur

+0

Вы можете получить доступ к элементу, который вызвал событие внутри вашей функции обработчика, а затем отобразить правильный div для этого элемента. – RibaldEddie

2

Кажется, вы собираетесь что-то вроде это:

HTML:

<div class="content" id="con_a">Hello world.</div> 
    <div id="show_con_a" style="display:none">Show Me on content div "a" hover</div> 

<div class="content" id="con_b">Nice to meet you.</div> 
    <div id="show_con_b" style="display:none">Show Me on content div "b" hover</div> 

<div class="content" id="con_c">See you later.</div> 
    <div id="show_con_c" style="display:none">Show Me content div "c" hover</div> 

JAVASCRIPT:

//Collect all divs with 'content' class 
$('.content').each(function(){ 
    //Set mouse handler for each content div 
    $(this).hover(function(){ 
     $('#show_' + this.id).show(); 
    }, 
    function(){ 
     $('#show_' + this.id).hide(); 
    }); 
}); 

АЛЬТЕРНАТИВНЫЙ JAVASCRIPT:

//Collect all divs with an id that begins with 'con_' 
$("[id=^'con_']").each(function(){ 
    //Set mouse handler for each content div 
    $(this).hover(function(){ 
     $('#show_' + this.id).show(); 
    }, 
    function(){ 
     $('#show_' + this.id).hide(); 
    }); 
});