-
-
Save gaku3601/ce9e8b35bc292019c7b2532a804a7286 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World!</title> | |
| </head> | |
| <body> | |
| <button id="button">button</button> | |
| <button id="button2">button</button> | |
| <div class="grid"> | |
| <div class="element-item transition metal " data-category="transition"> | |
| <a href="http://google.co.jp" rel="hogehoge">google</a> | |
| <h3 class="name">Mercury</h3> | |
| <p class="symbol">Hg</p> | |
| <p class="number">80</p> | |
| <p class="weight">200.59</p> | |
| </div> | |
| <div class="element-item metalloid " data-category="metalloid"> | |
| <a href="http://yahoo.co.jp" rel="hogehoge">yahoo</a> | |
| <h3 class="name">Tellurium</h3> | |
| <p class="symbol">Te</p> | |
| <p class="number">52</p> | |
| <p class="weight">127.6</p> | |
| </div> | |
| </div> | |
| </body> | |
| <script | |
| src="https://code.jquery.com/jquery-3.1.1.js" | |
| integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" | |
| crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script> | |
| <script src="./index.js"></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var $grid = $('.grid').isotope({ | |
| itemSelector: '.element-item', | |
| layoutMode: 'fitRows', | |
| getSortData: { | |
| name: '.name', | |
| symbol: '.symbol', | |
| number: '.number parseInt', | |
| category: '[data-category]', | |
| weight: function( itemElem ) { | |
| var weight = $( itemElem ).find('.weight').text(); | |
| return parseFloat( weight.replace( /[\(\)]/g, '') ); | |
| } | |
| } | |
| }); | |
| // ボタンオール | |
| $('#button').click(function(e) { | |
| $grid.isotope({ filter: '*' }) | |
| }); | |
| // ボタン2 | |
| $('#button2').click(function(e) { | |
| $grid.isotope({ filter: '.metal' }) | |
| var test = $('.grid') | |
| }); | |
| $grid.on( 'arrangeComplete', | |
| function( event, filteredItems ) { | |
| var tete = $('.grid > .element-item'); | |
| $('.grid > .element-item').map(function(val, key) { | |
| if(key.style.display == 'none'){ | |
| var test = key.attributes.class.ownerElement | |
| $(test).find('a').removeAttr('rel') | |
| }else{ | |
| var test = key.attributes.class.ownerElement | |
| $(test).find('a').attr('rel','hogehoge') | |
| } | |
| }); | |
| } | |
| ); | |
| $grid.on( 'layoutComplete', | |
| function( event, laidOutItems ) { | |
| console.log( 'Isotope layout completed on ' + | |
| laidOutItems.length + ' items' ); | |
| } | |
| ); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
取り敢えず、未完ながらも実装テストしてみました。
おかげさまで、うまく動いてます。
たた、自分の頭で理解出来るまでもう少し頑張ってみます。
ところで、上記コードの中に、
var tete = $('.grid > .element-item');
というのがあるのですが、 tete とあるのは、testの方が正しいのですか？
そこだけ疑問が残ってしまいました。