@asadov11

Конфликт с MixItUp?

делаю фильтр работ на сайте
в консоли ошибка $(...).mixItUp is not a function
всю голову сломал, не знаю как решить.
Подключал с помощью JQuery как здесь Пример подключения MixItUp

вот код
html
<div class="work-container">
			<div class="heading-work">
				<h2 class="h1">Filter by type</h2>
				<div class="work-buttons">
					<button class="type-filter" data-filter="all">All</button>
					<button class="type-filter" data-filter=".web-design">Web design</button>
					<button class="type-filter" data-filter=".mobile-design">Mobile design</button>
					<button class="type-filter" data-filter=".photography">Photography</button>
				</div>
			</div>
			<div class="work-items">
				<div class="work-container_item mix-target web-design" data-order="1">
					<div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Web design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target web-design" data-order="2">
					<div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Web design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target web-design" data-order="3">
					<div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Web design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target web-design" data-order="4">
					<div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Web design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target mobile-design" data-order="5">
					<div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Moblie design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target mobile-design" data-order="6">
					<div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Moblie design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target mobile-design" data-order="7">
					<div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Moblie design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target mobile-design" data-order="8">
					<div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Moblie design</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target photography" data-order="9">
					<div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Photography</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target photography" data-order="10">
					<div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Photography</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target photography" data-order="11">
					<div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Photography</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
				<div class="work-container_item mix-target photography" data-order="12">
					<div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
					<div class="work-item_hover">
						<h2 class="h1">Trand and fashion</h2>
						<span>Photography</span>
						<a href="#" class="button-more"><i class="fa fa-plus"></i></a>
					</div>
				</div>
			</div>
			
	
		</div>


JS

$('.work-items').mixItUp({
		selectors: {
			target: '.mix-target',
			filter: '.type-filter'
		},
		animation: {
    			effects: 'fade rotateZ(-180deg)',
    			duration: 700
  		}
		
	});


Помогите пожалуйста!
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ответы на вопрос 1
@advertise
Во-первых, ВСЕГДА используйте в первую очередь Документация с сайта скрипта.
В данном случае это: https://www.kunkalabs.com/mixitup/docs/get-started/
Плюс Примеры https://demos.kunkalabs.com/mixitup/

Во-вторых, как следствие у Вас следующие ошибки
1) Вы не указали критерии фильтрации. У вас есть кнопки, но нет критериев по которым скрипт должен фильтровать. Фильтр как фильтрует и сортирует контент: Вы пишите категории. потом указываете кнопки с этими категориями и прописываете эти категории в контенте. Фильтр соотносит эти данные и выводит информацию. Сейчас у Вас нет изначальных категорий.
То есть до кнопок добавляете следующий контейнер с соответствующими категориями:
<div class="container">
    <div class="mix category-a" data-order="1"></div>
    <div class="mix category-b" data-order="2"></div>
    <div class="mix category-b category-c" data-order="3"></div>
    <div class="mix category-a category-d" data-order="4"></div>
</div>
</div>

2) В JS вы не подключаете фильтр.
Должно быть
var mixer = mixitup('.container');
var mixer = mixitup(containerEl);
var mixer = mixitup(containerEl, {
    selectors: {
        target: '.blog-item'
    },
    animation: {
        duration: 300
    }
});

В Вашем случае вместо .container прописываете свой класс .work-item и свойства свои
И mixitup конфликтует почему-то с JQuery. Если используете иные еще скрипты то mixitUp ставьте последним.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы