Форум

emptyindorill · #1 (**permalink**) 05.12.2017, 19:23

Добрый день.

Использую для фильтрации плагин isotope.

Но в одном из вариантов мне не нужно что бы он скрывал отфильтрованные элементы.

Нужно что бы всего лишь на отфильтрованные классы добавлялся активный класс.

Пытаюсь на примере автора сделать этот вариант, http://jsfiddle.net/pAfwv/86/

Подскажите пожалуйста, как можно реализовать такое?

Может у кого есть примеры?

рони · #2 (**permalink**) 05.12.2017, 19:49

Сообщение от emptyindorill

Нужно что бы всего лишь на отфильтрованные классы добавлялся активный класс.

зачем тогда плагин?

void() · #3 (**permalink**) 05.12.2017, 21:26

emptyindorill,
что-то вроде этого?
Там чуть доделать нужно, чтоб чекбоксы заработали. Но можно и так мышью нажимать на элементы - главное идея)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="filters">
  <input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
  <input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
  <input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
  <input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>

<div id="container">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
</div>

<script>
	var arr = document.querySelectorAll('.item');
	window.onload = function(){
		for(var i = 0; i < arr.length; i++){
			arr[i].onclick = filtr;
		}
	}

function filtr(){
	var x = this.classList[1];
	var temp = [];
	for(var i = 0; i < arr.length; i++){

		if(arr[i].classList.contains(x)){
			temp[temp.length] = arr[i];
		}
	}
	/*console.log(temp);*/
	/*тут можно добавить выбранным элементам свой класс или сделать с ними что-то другое*/
	for(var k = 0; k < temp.length; k++){
		temp[k].classList.toggle('myClass');
	}
}

</script>
<style>
.myClass{
	border-radius:50%;
}
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
  border: 1px solid;
  padding: 3px;
}

.item {
  width: 70px;
  height: 70px;
  margin: 3px;
  float: left;
}

.item.large {
  width: 146px;
  height: 146px;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */
.item.is-filtered {
  border: 3px solid #000;
}
</style>
</body>
</html>

emptyindorill · #4 (**permalink**) 06.12.2017, 07:32

Сообщение от рони

зачем тогда плагин?

Он у меня в двух местах используется, с разными настройками.

Но они схожи с оригинальным функционалом.

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

Только вот не получается

рони · #5 (**permalink**) 06.12.2017, 09:34

emptyindorill,
не могли бы вы пояснить, что даёт плагин если нужна только смена классов? не понимаю, что вы хотите сделать.

emptyindorill · #6 (**permalink**) 06.12.2017, 09:53

Сообщение от void()

emptyindorill,
что-то вроде этого?[/html]

Спасибо за подсказку.

Не могу сейчас сообразить быстро как подпилить для себя, решил таким способом.

Спасибо.

рони · #7 (**permalink**) 06.12.2017, 11:48

emptyindorill,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
  border: 1px solid;
  padding: 3px;
}

.item {
  width: 70px;
  height: 70px;
  margin: 3px;
  float: left;
  box-sizing: border-box;
}

.item.large {
  width: 146px;
  height: 146px;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */
.item.is-filtered {
  border: 3px solid #000;
}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>

  <script>
$(function() {
    var $container = $("#container"),
        $checkboxes = $("#filters input");
    $container.isotope({
        itemSelector: ".item",
        getSortData: {
            cls: function(itemElem) {
                var chec = $checkboxes.filter(":checked").get();
                for (var i = 0; i < chec.length; i++) {
                    var cls = chec[i].value.slice(1);
                    if (itemElem.classList.contains(cls)) {
                        itemElem.classList.add("is-filtered");
                        return i
                    }
                }
                itemElem.classList.remove("is-filtered");
                return i
            }
        },
        sortBy: "cls"
    });
    $checkboxes.change(function() {
        $container.isotope("updateSortData").isotope()
    })
});
  </script>
</head>

<body>
<div id="filters">
  <input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
  <input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
  <input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
  <input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>

<div id="container">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
</div>
</body>
</html>

рони · #8 (**permalink**) 06.12.2017, 11:50

emptyindorill,

вариант без плагина isotope

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
  border: 1px solid;
  padding: 3px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}



.item {
  width: 70px;
  height: 70px;
  margin: 3px;
  box-sizing: border-box;
}

.item.large {
  width: 146px;
  height: 146px;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

.item.is-filtered {
  border: 3px solid #000;
}



</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var chec = $("#filters input"),
        item = $("#container .item");
    chec.on("change", function() {
        item.removeClass("is-filtered").css({
            "order": chec.length
        });
        $.each(chec.filter(":checked"), function(i, el) {
            item.filter(el.value).css({
                "order": i
            }).addClass("is-filtered")
        })
    })
});
  </script>
</head>

<body>
<div id="filters">
  <input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
  <input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
  <input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
  <input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>

<div id="container">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
</div>
</body>
</html>

emptyindorill · #9 (**permalink**) 14.12.2017, 11:00

Сообщение от рони

emptyindorill,
вариант без плагина isotope

Спасибо большое!
У меня уже эта тема развилась до определенных настроек.

И возникла проблема в переключении активного checkbox'са

Вот тут я реализовал свой какокод)

Суть какая - по чекбоксам фильтруются блоки.
Причем фильтруется так что если блок с родителем последнего, четвертого уровня - нужно отобразить иерархию вплоть до первого родителя.

И тут столкнулся с проблемами двумя - не могу придумать как правильно настроить так что бы отображался только выбранный блок и его родители + сделать так что бы при клик на другой чекбокс функция возвращалась в исходное и начинала заново.

(+ у меня там аккордеон без поочередности, но его я указывать не стал, так что пусть вот это

$(".obertka" + "." + $(this).val()).parents(':hidden').slideDown('slow');

в коде не смущает)

Подскажите пожалуйста, или приведите примеры, где и как такое сделано.

Заранее, большое спасибо.

emptyindorill · #10 (**permalink**) 14.12.2017, 11:02

Насколько возможно будет такую функцию:

$('.full_cart').each(function() {
    $('.mails').parent().find('ul li').on('click', function() {
        change_active($(this));
        return false;
    });

    function change_active(current) {
    	$('.full_cart .mails li').removeClass("active");
    	current.addClass("active");
    }
	});

Подвязать к моему коду? Будет ли вариант с change_active адекватно интерпретироваться?

Форум

Справочник

Discord чат

Курсы javascript