Как реализовать код для слайд-переключателя изображения, не записывая слишком много событий переключения - PullRequest
Новая
       13

Как реализовать код для слайд-переключателя изображения, не записывая слишком много событий переключения

0 голосов
/ 24 января 2019

Я только что написал пример о том, как не кодировать.

Вот проблема:

Я создал некоторый div с изображениями для отображения и скрытия абзаца на основенажмите на событие на этих изображениях.Есть два изображения, один знак плюс и один знак плюс.Довольно стандартный:

HTML: 

<p style="padding-left: 70px;">
    <img class="toggle-show" src="/Icon-open.png">
    <img class="toggle-hide" src="/Icon-close.png">
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</span>
</p>

<div class="slidedown">
<p>Some Information</p>
</div>

CSS: 

.toggle-show {
    display: none;
}
.slidedown {
    display: none;
}

Пока все хорошо.Чтобы взаимодействовать с ними и достичь желаемого эффекта, я использовал jQuery: 

$(".toggle-show").click(function() {
    $(this).parent().next().slideToggle();
    $(this).toggle();
    $(this).next().toggle();
});
$(".toggle-hide").click(function() {
    $(this).parent().next().slideToggle();
    $(this).toggle();
    $(this).prev().toggle();
});

Довольно грязно на мой вкус, но работает отлично.Мне было интересно, есть ли другой способ написать код для его оптимизации.

...