Как адаптировать данный код под мой html?

Question

[Mak_Pet]

Песочница — https://codepen.io/dantilse/pen/oLvVeZ

Мой вариант, который не работает, т.к. не смог адаптировать код, блок LATEST WORKS. Но хочется не просто сверстать страницу, еще и немного оживить ее.

Результат

https://makpet.github.io/Bootstrap_two/

HTML

https://github.com/MakPet/Bootstrap_two/blob/maste...

СSS

https://github.com/MakPet/Bootstrap_two/blob/maste...

JS

https://github.com/MakPet/Bootstrap_two/blob/maste...

Comments

[Comsequent]

Объясните, пожалуйста, что вы бы хотели получить?

$('.lastest-work__nav-link').click(function(){
		// reset active class
		$('.lastest-work__nav-link').removeClass("active");
		// add active class to selected
		$(this).addClass("active");
		// return needed to make function work
		return false;
	});

Я вот прочёл Ваш код. И понял, что ничего не понял

[Mak_Pet]

Comsequent, код не мой, хотел бы получить работающий фильтр. В примере по анологии с ним он же работает.

[Mak_Pet]

Comsequent,

$(function() {
		// create an empty variable
		var selectedClass = "";
		// call function when item is clicked
		$(".lastest-work__nav-link").click(function(){
			// assigns class to selected item
			selectedClass = $(this).attr("data-rel");
			// fades out all portfolio items
			$(".demonstration-lastest-work .demonstration-lastest-work__inner").fadeOut(300);
			// fades in selected category
			$(".demonstration-lastest-work .demonstration-lastest-work__inner strategy" + selectedClass).delay(300).fadeIn(300);
		});

За исчезновение и появление плиток отвечает эта часть кода, как я понял.

[Comsequent]

Mak_Pet, этот да. Тот, что у Вас на гитхабе нет.
Я позже посмотрю как это решить. С телефона это затруднительно.

[Mak_Pet]

Comsequent, буду благодарен.

[Mak_Pet]

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

[Mak_Pet]

Comsequent, случайно скопировал сюда лишний класс, теперь тут так.

$(document).ready(function(){
	$('.lastest-work__nav-link').click(function(){
		// reset active class
		$('.lastest-work__nav-link').removeClass("active");
		// add active class to selected
		$(this).addClass("active");
		// return needed to make function work
		return false;
	});
	
	
	$(function() {
		// create an empty variable
		var selectedClass = "";
		// call function when item is clicked
		$(".lastest-work__nav-link").click(function(){
			// assigns class to selected item
			selectedClass = $(this).attr("data-rel");
			// fades out all portfolio items
			$(".demonstration-lastest-work .demonstration-lastest-work__inner").fadeOut(300);
			// fades in selected category
			$(".demonstration-lastest-work .demonstration-lastest-work__inner" + selectedClass).delay(300).fadeIn(300);
		});
	});
  
}); // document ready

Консоль говорит, что ошибка в 20 строке.

script.js:20 Uncaught TypeError: $(...).fadeOut is not a function
at HTMLAnchorElement. (script.js:20)

[Comsequent]

Mak_Pet, посмотрите тут

[Mak_Pet]

Comsequent, спасибо, но в JS ничего не понимаю. Пусть тогда останется как есть сейчас.

[Mak_Pet]

Comsequent, можете подсказать что конкретно из этого решения нужно добавить в мой код?

[Mak_Pet]

Comsequent, script.js:20 Uncaught TypeError: $(...).fadeOut is not a function
at HTMLAnchorElement. (script.js:20), проблема решена частично. https://stackoverflow.com/questions/934446/why-doe...

Подключение полной библиотеки решило проблему, теперь элементы скрываются, но все и по нажатию на любую кнопку.

[Comsequent]

Mak_Pet, это то что Вы хотели получить, в итоге?

$(function() {
		// create an empty variable
		var selectedClass = "";
		// call function when item is clicked
		$(".lastest-work__nav-link").click(function(){
			// assigns class to selected item
			selectedClass = $(this).attr("data-rel");
			// hide all portfolio items
			$(".demonstration-lastest-work .demonstration-lastest-work__inner").fadeOut(300);
			// show selected category
			if(selectedClass==='all'){
				$(".demonstration-lastest-work__inner").delay(300).fadeIn(300);
			} else {
				$("." + selectedClass).delay(300).fadeIn(300);
			}
		});
	});

[Mak_Pet]

Comsequent, именно, спасибо Вам большое.

[Comsequent]

Mak_Pet, пожалуйста.
ЗЫ если, не трудно, отметьте как решение

Answer 1

[Comsequent]

$(function() {
    // create an empty variable
    var selectedClass = "";
    // call function when item is clicked
    $(".lastest-work__nav-link").click(function(){
      // assigns class to selected item
      selectedClass = $(this).attr("data-rel");
      // hide all portfolio items
      $(".demonstration-lastest-work .demonstration-lastest-work__inner").fadeOut(300);
      // show selected category
      if(selectedClass==='all'){
        $(".demonstration-lastest-work__inner").delay(300).fadeIn(300);
      } else {
        $("." + selectedClass).delay(300).fadeIn(300);
      }
    });
  });