Определить идентификатор ребенка и вызвать слайд-переключатель на нем - PullRequest
Новая
       10

Определить идентификатор ребенка и вызвать слайд-переключатель на нем

0 голосов
/ 19 марта 2012

В основном у меня есть ряд проектов, отображаемых на странице.

Каждый проект состоит из контейнера div, изображения div внутри, а затем кнопки внутри этого div. С другим div там, который установлен на «Display: none». Когда пользователь нажимает кнопку «внутри», элемент div устанавливается на «display: none» slideToggles при каждом нажатии ...

У меня их будет много на странице, и в настоящее время мне нужно добавить новые строки кода для нового 'id' кнопки и скользящего элемента div ... Есть ли способ обнаружить скользящий элемент div, который является ребенок к изображению div?

Текущий код, который я использую: 

$(function(){
    $("#lifestyledropdown").click(function(event) {
        event.preventDefault();
        $("#lifestyleimages").slideToggle();
    });

    $("#camarguedropdown").click(function(event) {
        event.preventDefault();
        $("#camargueimages").slideToggle();
    });
});

Каждый следует по одному и тому же шаблону:

Проект 1:
div id = 'name-A'dropdown (идентификатор кнопки для активации переключения слайдов)
div id = 'name-A'images (идентификатор div, который скользит вниз)

Проект 2:
div id = 'name-B'dropdown (идентификатор кнопки для активации переключения слайдов)
div id = 'name-B'images (идентификатор div, который скользит вниз)

Каждый проект будет иметь одинаковую разметку, только разное содержимое, поэтому я предполагаю, что могу использовать код для обнаружения «раздела имени»?

HTML для проектов: 

<div class="projectcontent">
<div class="projectimg"><img src="images/imagemain.jpg" alt="project" />

<div id="gallerybutton">
<a href="#" id="lifestyledropdown"><img src="images/gallerycollapsewhite.png" alt="project" class="gallerycollapse"/>
<img src="images/gallerycollapseblack.png" alt="project" class="gallerycollapseB"/></a>
</div>

<div class="projecttext" style="color:#FFF;text-align:left;">
<img src="images/breakshortwhite.jpg" />

<p2>PROJECT NAME<br />
ESTOTAS AUT ALICIENI QUIBUS EXPEROR ESTIAT ESTO VOLORPORRUM EARIORIT EUM EUM ATE CUS MO ET ATEM. TAE RE VELENDI GNIATUR, UTATE ET PORUM HARIBER AERORATISI BLACCUP TATIBEA TIOREPE LLIQUAE PELENIH ILIBEA SAPITAM EUM MEUN.<p2>
</div>

<div class="expandablebox" id="lifestyleimages" style="display:none;">
<div class="projectimg"><img src="images/image-slider.jpg" alt="project" />
</div>
</div>
</div>
</div>

1 Ответ

2 голосов
/ 19 марта 2012

Вы можете использовать селектор «заканчивается с» $=, чтобы получить все dropdown идентификаторы, а затем использовать next() до slideToggle() последующего div: 

$('div[id$="dropdown"]').click(function(ev){
    ev.preventDefault();
    $(this).next().slideToggle();
});
​

См. Демонстрацию 1

Если div images не обязательно следует непосредственно за div dropdown, вы можете использовать некоторое регулярное выражение для выполнения задачи: 

$('div[id$="dropdown"]').click(function(ev){
    ev.preventDefault();
    $toggleDiv = $('#' + this.id.replace(/^(.*?)dropdown$/, '$1images'));
    $toggleDiv.slideToggle();
});
​

См. Демо 2

...