Clickable toggle для зависания и улучшения и улучшения кода

Question

Я очень новичок в jQuery, и я строю страницу с несколькими div-переключателями.

В примере того, что я до сих пор у меня есть 3 интерактивной дива (.info1, .info2, .info3), которые по отдельности включать или другие соответствующие див (.infobox1, .infobox2, .infobox3).

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

Поэтому у меня есть два вопроса:

1. как я могу сделать мой код, так что я не должен продолжать добавлять строки для переключения каждый раз, $('.infobox1').toggle();$('.infobox2').toggle(); $('.infobox3').toggle(); и т.д. стал бы одним и разрешить любое число после информации & инфобокс?

2. Как я могу это сделать, когда я навешиваю информацию, а не нажимаю инфобокс, чтобы она оставалась достаточно длинной для того, чтобы кто-то переместил туда над ней?

$('.info1').click(function(){ 
    $('.infobox1').toggle(); 
}); 
$('.info2').click(function(){ 
    $('.infobox2').toggle(); 
}); 
$('.info3').click(function(){ 
    $('.infobox3').toggle(); 
}); 

<div class="lb-info info1" style="margin-top: -52%; margin-left: 24%;"></div> 
<a href=""> 
    <div class="lb-infobox infobox1" style="left: 26%; top: 22%;"> 
     Info1 <br /> 
     <span class="product-info">Info2</span> <br /> 
     Info3 
    </div> 
</a> 

<div class="lb-info info2" style="margin-top: -25%; margin-left: 26%;"></div> 
<a href=""> 
    <div class="lb-infobox infobox2" style="left: 6.5%; top: 58%;"> 
     Info1 <br /> 
     <span class="product-info">Info2</span> <br /> 
     Info3 
    </div> 
</a> 

<div class="lb-info info3" style="margin-top: -15%; margin-left: 26%;"></div> 
<a href=""> 
    <div class="lb-infobox infobox3" style="left: 28%; top: 72%;"> 
     Info1 <br /> 
     <span class="product-info">Info2</span> <br /> 
     Info3 
    </div> 
</a> 

Многое признателен за любую помощь.

Answer 1

Вы можете использовать общий класс на элементах триггера DIV, а затем пройти через DOM, чтобы найти элемент для переключения, что-то вроде этого:

$('.lb-info').click(function(){ 
    $(this).next('a').find('.lb-infobox').toggle(); 
});