배열메서드 - 필터링[2]

forEach() 다른 예제, 여전히 익숙지가 않다. 책에서 참고한 예제다.

무슨 책이냐고? 안알려줌 케케케... ^,^@

영원한 삼춘 맘 속 여신 박보영으로 예제를 만들어보았다!

 

See the Pen BaoJdjK by rainydaymusickr (@rainydaymusickr) on CodePen.

(function() {

    var imgItems = $('.grid .grid-item');
    var imgs = $('.grid .grid-item img');
    var buttons = $('#buttons');
    var concept = {};

    $(window).load(function() {

        imgs.each(function() {
            var nowImg = this;

            if ($(this).data('concept')) {
                $(this).data('concept').split(',').forEach(function(styleName) {
                    if (concept[styleName] == null) {
                        concept[styleName] = [];
                    }
                    concept[styleName].push(nowImg);
                });
            }

            //실제 이미지가 이미지틀보다 작을 경우에만 top으로 내려서 중앙정렬시키기
            if ($(this).height() & lt; = 200) {
                $(this).css('top', Math.abs(($(this).height() - 200) / 2) + 'px');
            } else {
                return;
            }
        });

        //동적으로 태그를 생성하고, 옵션을 바로 정의할 수 있는 형식
        $('<button/>', {
            text: '모두보기',
            class: 'active',
            click: function() {
                $(this).addClass('active')
                    .siblings().removeClass('active');
                imgItems.show();
            }
        }).appendTo($('#buttons'));

        $.each(concept, function(elem) {
            $('<button/>', {
                text: elem,
                click: function(e) {
                    $(this).addClass('active').siblings().removeClass('active');
                    imgItems.hide().find('img').filter(concept[elem]).parent().show();

                }
            }).appendTo($('#buttons'));
        });
    });

})();

:root {font-size:62.5%;}
* {margin:0;padding:0;}
body {padding:10px;font-size:1.6rem;background:#282c34;}
img {position:relative;width:100%;vertical-align:top;transform:scale(1) rotate(0deg);transform-origin:center;transition:all .2s ease-out;}
img:hover {transform:scale(2) rotate(30deg);}
.grid:after {content:'';display:block;clear:both;}
.grid-item {
	overflow:hidden;
	width:150px;
	height:200px;
	float:left;
	margin-bottom:25px;
	background:wheat;
	border:2px solid #333;
	border-color:hsla(0, 0%, 0%, 0.5);
	border-radius:5px;
}
#buttons{margin-bottom:10px;}
button {padding:10px;border-radius:10px;border:0;background-color:#999;color:#000;}
button+button{margin-left:5px;}
button.active {background-color:#000;color:#fff;}

<div id="buttons"></div>
<div class="grid">
  <div class="grid-item">
  	<img src="https://img.etoday.co.kr/pto_db/2015/06/20150610013411_651887_430_561.jpg" data-concept="sexy,pretty" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://i.pinimg.com/originals/b2/1c/da/b21cdacfd11ea24664a52c392d6d6707.png" data-concept="cute,pretty" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://www.uuoobe.kr/data/file/photo3/2070777968_CUGRAaXE_EAB080EAB0951.jpg" data-concept="pretty,cute" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://ext.fmkorea.com/files/attach/new/20161213/486616/47017249/533826390/223e96e691e76354f671b407d997f2d2.gif" data-concept="sexy" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://2.bp.blogspot.com/-CsZ5MEc93Qo/WpKBqkJZPmI/AAAAAAAABFo/nIe9QQeKDhU2XpdCT0vOy6qHlTmpaAHUACLcBGAs/s1600/2365A74A58F3562D2884CB.gif" data-concept="sloppy" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://optimal.inven.co.kr/upload/2015/07/28/bbs/i13030583947.gif" data-concept="cute,pretty" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://t1.daumcdn.net/cfile/tistory/2436684C568FD11008" data-concept=" pretty,cute" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://mania.kr/g2/data/cheditor5/1602/mania-done-195b255ccad94e3bb9a9d0b94a58da32_20160209232121_fdwvggul.jpg" data-concept="healthy,pretty" alt="">
  </div>
  <div class="grid-item">
  	<img src="https://i.pinimg.com/736x/6e/0d/22/6e0d229268e0e43c35b038e80ae51c05.jpg" data-concept="stlylish,pretty" alt="">
  </div>
</div>