サムネイルポートフォリオフィルタが正しく動作しない

Question

私のサイトでフィルタを使用してサムネイルを取得しようとしています。私はこれをインスピレーションとしてat codepenを使っています。 codepenで問題なく動作していますが、すぐに私のWordPressのサイトに（divi。themeを使用して）コードを挿入すると、フィルタリングはまったく機能しません。私は #portiz へと.btnから.butn #port からのスタイルを変更した次のコードで

。私はそれが既存のスタイリングを上書きしていることに気付き、これが問題であるかどうかをテストしたかったので、この変更を加えました。私は、JSとHTMLでも同じ変更を加えました。

私はどこで何を変更したり追加したりすることはできません。

ベスト

、 レイ

<script> 
 
$(function() { 
 
\t \t var selectedClass = ""; 
 
\t \t $(".fil-cat").click(function(){ 
 
\t \t selectedClass = $(this).attr("data-rel"); 
 
    $("#portiz").fadeTo(100, 0.1); 
 
\t \t $("#portiz div").not("."+selectedClass).fadeOut().removeClass('scale-anm'); 
 
    setTimeout(function() { 
 
     $("."+selectedClass).fadeIn().addClass('scale-anm'); 
 
     $("#portiz").fadeTo(300, 1); 
 
    }, 300); 
 
\t \t 
 
\t }); 
 
}); 
 
</script>

#portiz{ 
 
    margin: 1rem 0; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 1rem; 
 
    -moz-column-gap: 1rem; 
 
    column-gap: 1rem; 
 
    -webkit-column-width: 33.33333333333333%; 
 
    -moz-column-width: 33.33333333333333%; 
 
    column-width: 33.33333333333333%; 
 
} 
 
.tile { 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
    -webkit-transition: all 350ms ease; 
 
    transition: all 350ms ease; 
 

 
} 
 
.tile:hover { 
 

 
} 
 

 
.scale-anm { 
 
    transform: scale(1); 
 
} 
 

 
.tile img { 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: 1rem; 
 
    
 
} 
 

 
.butn { 
 
    font-size: 1rem; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    line-height: normal; 
 
    padding: .5rem 1rem; 
 
    margin: 0; 
 
    height: auto; 
 
    border: 1px solid; 
 
    vertical-align: middle; 
 
    -webkit-appearance: none; 
 
    color: #555; 
 
    background-color: rgba(0, 0, 0, 0); 
 
} 
 

 
.butn:hover { 
 
    text-decoration: none; 
 
} 
 

 
.butn:focus { 
 
    outline: none; 
 
    border-color: var(--darken-2); 
 
    box-shadow: 0 0 0 3px var(--darken-3); 
 
} 
 

 
::-moz-focus-inner { 
 
    border: 0; 
 
    padding: 0; 
 
}

<div class="toolbar mb2 mt2"> 
 
    <button class="butn fil-cat" href="" data-rel="all">All</button> 
 
    <button class="butn fil-cat" data-rel="web">Websites</button> 
 
    <button class="butn fil-cat" data-rel="flyers">Flyers</button> 
 
    <button class="butn fil-cat" data-rel="bcards">Business Cards</button> 
 
</div> 
 
    
 
<div style="clear:both;"></div> 
 
<div id="portiz"> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all">  
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
</div> 
 
<div style="clear:both;"></div>

Answer 1

あなたのJSはちょっと厄介ですが、それは動作します。あなたは自分の間違いのカップルがSOスニペットいます

1. あなたはあなたの例では$が定義されていないので、jQueryのを含めるのを忘れてJSエディタ
2. で<script></script>タグが含まshoudn't。

それに加えて、それが動作します：

$(function() { 
 
\t \t var selectedClass = ""; 
 
\t \t $(".fil-cat").click(function(){ 
 
\t \t selectedClass = $(this).attr("data-rel"); 
 
    $("#portiz").fadeTo(100, 0.1); 
 
\t \t $("#portiz div").not("."+selectedClass).fadeOut().removeClass('scale-anm'); 
 
    setTimeout(function() { 
 
     $("."+selectedClass).fadeIn().addClass('scale-anm'); 
 
     $("#portiz").fadeTo(300, 1); 
 
    }, 300); 
 
\t \t 
 
\t }); 
 
});

#portiz{ 
 
    margin: 1rem 0; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 1rem; 
 
    -moz-column-gap: 1rem; 
 
    column-gap: 1rem; 
 
    -webkit-column-width: 33.33333333333333%; 
 
    -moz-column-width: 33.33333333333333%; 
 
    column-width: 33.33333333333333%; 
 
} 
 
.tile { 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
    -webkit-transition: all 350ms ease; 
 
    transition: all 350ms ease; 
 

 
} 
 
.tile:hover { 
 

 
} 
 

 
.scale-anm { 
 
    transform: scale(1); 
 
} 
 

 
.tile img { 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: 1rem; 
 
    
 
} 
 

 
.butn { 
 
    font-size: 1rem; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    line-height: normal; 
 
    padding: .5rem 1rem; 
 
    margin: 0; 
 
    height: auto; 
 
    border: 1px solid; 
 
    vertical-align: middle; 
 
    -webkit-appearance: none; 
 
    color: #555; 
 
    background-color: rgba(0, 0, 0, 0); 
 
} 
 

 
.butn:hover { 
 
    text-decoration: none; 
 
} 
 

 
.butn:focus { 
 
    outline: none; 
 
    border-color: var(--darken-2); 
 
    box-shadow: 0 0 0 3px var(--darken-3); 
 
} 
 

 
::-moz-focus-inner { 
 
    border: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toolbar mb2 mt2"> 
 
    <button class="butn fil-cat" href="" data-rel="all">All</button> 
 
    <button class="butn fil-cat" data-rel="web">Websites</button> 
 
    <button class="butn fil-cat" data-rel="flyers">Flyers</button> 
 
    <button class="butn fil-cat" data-rel="bcards">Business Cards</button> 
 
</div> 
 
    
 
<div style="clear:both;"></div> 
 
<div id="portiz"> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
      <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all">  
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
</div> 
 
<div style="clear:both;"></div>