Пули для слайдПереключение внешних элементов - PullRequest
Новая
       5

Пули для слайдПереключение внешних элементов

0 голосов
/ 04 июля 2018

У меня есть этот фрагмент кода, который я использую, чтобы легко перемещать 3 деления: 

$(function () {
    $('.service-title').click(function () {
        $(this).next('.service-text').slideToggle();

        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
});

Div отмечены следующим образом (три раза): 

<div class="service-item">
    <div class="service-title"><h3>Title</h3></div>

    <div class="service-text">Text</div>
</div>

Это отлично работает. Однако, проект, над которым я работаю, требует, чтобы я добавил изображение с тремя маркерами рядом с ним. Эти маркеры (.bullet-1, .bullet-2 и .bullet-3) - это элементы div, расположенные над изображением, и нажатие каждой из них должно открыть либо первую, вторую или третью .service-item. Эти div, однако, не находятся в том же родительском div, и я не знаю, как настроить таргетинг на соответствующий div-элемент переключателя, нажав на элемент div.

Полная разметка HTML: 

<div class="colgroup-2">
    <div class="col">
        <div class="services-image">
            <img />

            <div class="bullet-1"></div>
            <div class="bullet-2"></div>
            <div class="bullet-3"></div>
        </div>
    </div>

    <div class="col">
        <div class="wrapper"> <!-- / used to vertically align content -->
            <div class="service-item">
                <div class="service-title"><h3>Title</h3></div>

                <div class="service-text">Text</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title</h3></div>

                <div class="service-text">Text</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title</h3></div>

                <div class="service-text">Text</div>
            </div>
        </div>
    </div>
</div>

Заранее спасибо!

1 Ответ

0 голосов
/ 04 июля 2018

Вы можете использовать следующий код в вашем случае: 

$(function(){
    $('[class*="bullet"]').on('click', function(){
        var relatedIndex = $('[class*="bullet"]').index($(this));
        $('.service-item').not($('.service-item').eq(relatedIndex)).slideUp();
        $('.service-item').eq(relatedIndex).slideToggle();
    });
});


$(function(){
  $('[class*="bullet"]').on('click', function(){
    var relatedIndex = $('[class*="bullet"]').index($(this));
    $('.service-item').not($('.service-item').eq(relatedIndex)).slideUp();
    $('.service-item').eq(relatedIndex).slideToggle();
  });
});
.service-item { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colgroup-2">
    <div class="col">
        <div class="services-image">
            <img />

            <div class="bullet-1">&#8226;</div>
            <div class="bullet-2">&#8226;</div>
            <div class="bullet-3">&#8226;</div>
        </div>
    </div>

    <div class="col">
        <div class="wrapper"> <!-- / used to vertically align content -->
            <div class="service-item">
                <div class="service-title"><h3>Title 1</h3></div>

                <div class="service-text">Text 1</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title 2</h3></div>

                <div class="service-text">Text 2</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title 3</h3></div>

                <div class="service-text">Text 3</div>
            </div>
        </div>
    </div>
</div>
...