Как работает this при клике по div в jquery?

Question

[animr]

Ребята приветствую всех, помогите пожалуйста разобраться в работе this, при получении текущего элемента моя функция выполняется но выполнятся после двойного щелчка по элементу, как его исправить? Задача: раскрывающие фильтры по щелчку на категории фильтров.

Код HTML

<div class="block">
    <div onclick="ShowDataFilter()" class="widget-title cus-category">Цвет<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_0" id="name_0" value="1">    <label for="name_0" class="custom-control-label cus-fw-adminLte-override">Черный (2129)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_1" id="name_1" value="1">    <label for="name_1" class="custom-control-label cus-fw-adminLte-override">Синий (910)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_2" id="name_2" value="1">    <label for="name_2" class="custom-control-label cus-fw-adminLte-override">Фиолетовый (185)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_3" id="name_3" value="1">    <label for="name_3" class="custom-control-label cus-fw-adminLte-override">Серый (696)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_4" id="name_4" value="1">    <label for="name_4" class="custom-control-label cus-fw-adminLte-override">Бордовый (168)</label></div>
    </ul>
</div>
<div class="block">
    <div onclick="ShowDataFilter()" class="widget-title cus-category">Тип<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_0" id="name_0" value="1">    <label for="name_0" class="custom-control-label cus-fw-adminLte-override">Ободковая (6227)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_1" id="name_1" value="1">    <label for="name_1" class="custom-control-label cus-fw-adminLte-override">Лесочная (381)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_2" id="name_2" value="1">    <label for="name_2" class="custom-control-label cus-fw-adminLte-override">Безободковая (420)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_3" id="name_3" value="1">    <label for="name_3" class="custom-control-label cus-fw-adminLte-override">полуободковые (124)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_4" id="name_4" value="1">    <label for="name_4" class="custom-control-label cus-fw-adminLte-override">маска (2)</label></div>
    </ul>
</div>

Вот код JS

function ShowDataFilter() {
    $('.block').on('click', '.cus-category', function() {
        $(this).toggleClass('red').siblings('.cus-slide').slideToggle(0);
    });
}

Answer 1

[scooby_doe]

Странное использование onclick атрибута и события on, нужно что-то одно. Если с атрибутом onclick, то будет так:

<div class="block">
    <div onclick="ShowDataFilter(this)" class="widget-title cus-category">Цвет<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_0" id="name_0" value="1">    <label for="name_0" class="custom-control-label cus-fw-adminLte-override">Черный (2129)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_1" id="name_1" value="1">    <label for="name_1" class="custom-control-label cus-fw-adminLte-override">Синий (910)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_2" id="name_2" value="1">    <label for="name_2" class="custom-control-label cus-fw-adminLte-override">Фиолетовый (185)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_3" id="name_3" value="1">    <label for="name_3" class="custom-control-label cus-fw-adminLte-override">Серый (696)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_4" id="name_4" value="1">    <label for="name_4" class="custom-control-label cus-fw-adminLte-override">Бордовый (168)</label></div>
    </ul>
</div>
<div class="block">
    <div onclick="ShowDataFilter(this)" class="widget-title cus-category">Тип<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_0" id="name_0" value="1">    <label for="name_0" class="custom-control-label cus-fw-adminLte-override">Ободковая (6227)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_1" id="name_1" value="1">    <label for="name_1" class="custom-control-label cus-fw-adminLte-override">Лесочная (381)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_2" id="name_2" value="1">    <label for="name_2" class="custom-control-label cus-fw-adminLte-override">Безободковая (420)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_3" id="name_3" value="1">    <label for="name_3" class="custom-control-label cus-fw-adminLte-override">полуободковые (124)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_4" id="name_4" value="1">    <label for="name_4" class="custom-control-label cus-fw-adminLte-override">маска (2)</label></div>
    </ul>
</div>

function ShowDataFilter(cusCategory) {
	$(cusCategory).toggleClass('red').siblings('.cus-slide').slideToggle(0);
}

Comments

[animr]

Дружище ты гений )) я просто не изучал никогда JS я так чисто по фану фильтры делаю на JS. Спасибо тебе еще раз.

[ProjectSoft]

animr, откажись от использования инлайновых скриптов.
Всё проще.

$(document).on('click', '.block .cus-category', function(e){
	$(this).toggleClass('red').siblings('.cus-slide').slideToggle(0);
});

Если вы добавите ещё один блок с помощью ajax или просто кодом, то данный код будет работать всегда.