Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Slick Slider, sledeUp() и slideToggle() - конфликт? (https://javascript.ru/forum/misc/80517-slick-slider-sledeup-i-slidetoggle-konflikt.html)

Alice Romanova 15.06.2020 17:38

Slick Slider, sledeUp() и slideToggle() - конфликт?
 
Здравствуйте! Столкнулась с проблемой: на сайте подключен slick slider. Делаю спойлер.
$('.spoiler__title').click(function(event){
        if($('.spoiler').hasClass('one')){
            $('.spoiler__title').not($(this)).removeClass('active');
            $('.spoiler__text').not($(this).next()).slideUp(300);
        }
        $(this).toggleClass('active').next().slideToggle(300);
    })

Спойлер не работает. Консоль выдаёт ошибку "Uncaught TypeError: $(...).not(...).slideUp is not a function"
Если отключить slick slider - всё работает. То есть, я так понимаю, что тут конфликт.
Подскажите, пожалуйста, можно ли его как-то разрешить, не отключая slick slider?
P.S.
Если заменить slideUp() и slideToggle() на show() и hide(), то работает и со slick slider, но некрасиво.

laimas 15.06.2020 17:42

$('.spoiler__title').click(function(event){
тут $(this) это и есть $('.spoiler__title')

Следовательно что такое будет $('.spoiler__title').not($(this))?

Alice Romanova 15.06.2020 17:56

Удаляю класс 'active' у всех элементов, кроме одного (чтобы при открывании одного блока, другой закрывался).

Вы считаете, это как-то влияет на конфликт, описанный в вопросе?

laimas 15.06.2020 17:59

Цитата:

Сообщение от Alice Romanova
Вы считаете, это как-то влияет на конфликт, описанный в вопросе?

$('.spoiler__title').click(function(event){
if($('.spoiler').hasClass('one')){
$('.spoiler__title').not($(this)).removeClass('act ive');
$('.spoiler__text').not($(this).next()).slideUp(30 0);
}
$(this).toggleClass('active').next().slideToggle(3 00);

})

И выполните вот такое:

$('.spoiler__title').click(function(event){
    console.log($('.spoiler__title').not(this))
})


Что в консоли наблюдается? Или $('.spoiler__title') это у вас коллекция?

Alice Romanova 15.06.2020 18:03

Ничего.

laimas 15.06.2020 18:07

Если $('.spoiler__title'), это коллекция, то $('.spoiler__title').not(this), это удалить из нее источник события с этим же классом из этой коллекции (просто this не надо тут получать JQ объект). То есть все верно тогда. Но как тогда объяснить это:

$('.spoiler__text').not($(this)), это что за коллекция и какое отношение к ней имеет $('.spoiler__text')?

PS. Кстати, тогда лучше так:

var name = $('.spoiler__title').click(function(event){
  //а тут не $('.spoiler__title').not($(this)), а
   name.not(this)....


зачем постоянно получать коллекцию.

Alice Romanova 15.06.2020 18:12

Может быть, так понятнее будет.

<div class="spoiler one">
    <div class="spoiler__item">
        <div class="spoiler__title">Заголовок</div>
        <div class="spoiler__text">Далеко-далеко за словесными горами в стране
            гласных и согласных живут.</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Заголовок</div>
        <div class="spoiler__text">Далеко-далеко за словесными горами в стране
            гласных и согласных живут.</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Заголовок</div>
        <div class="spoiler__text">Далеко-далеко за словесными горами в стране
            гласных и согласных живут.</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Заголовок</div>
        <div class="spoiler__text">Далеко-далеко за словесными горами в стране
            гласных и согласных живут.</div>
    </div>
</div>

laimas 15.06.2020 18:31

Тогда вот это

$('.spoiler__title').not($(this)).removeClass('act ive');
$('.spoiler__text').not($(this).next()).slideUp(30 0);

можно заменить на:

spl.hot(this).removeClass('active').siblings().slideUp(300)


где spl = var spl = $('.spoiler__title').click...., иначе так заумно, что не понять что к чему. ) Что за проблема со слайдером сказать не могу, может к документации обратиться?

Alice Romanova 15.06.2020 19:00

К документации обращалась (может, плохо обращалась, конечно). Ничего там не нашла по своему вопросу.
В любом случае, спасибо, что потратили своё время)

laimas 15.06.2020 19:16

$(...).not(...).slideUp is not a function - означает, что нет объекта/объектов, и применить к ним функцию нельзя.


Часовой пояс GMT +3, время: 04:30.