1. ホーム
  2. 質問と答え
  3. レターのフィルタボタンに無効なクラスを追加します。文字のクラスがコンテンツに含まれていない場合

レターのフィルタボタンに無効なクラスを追加します。文字のクラスがコンテンツに含まれていない場合

2017-09-21 5 views
-1

マイページにはアルバムがあります。アルバムのdiv内のアーティストの最初の手紙にしたがって、各アルバムにクラスを追加してコンテンツをフィルタリングします。レターのフィルタボタンに無効なクラスを追加します。文字のクラスがコンテンツに含まれていない場合

この目的は、この特定の文字で始まるアーティストがいない場合は、文字のフィルタボタンを無効にすることです。

私は何かをしようとするが、もちろん、それは動作しません、あなたのアイデアを持っていますか？ 関連コードは、JavaScriptの第3部分にあります。私は "アルファベットフィルター"と "トップページにスクロール"には問題ありません。あなたの助けのための

// Disabled button if no artist begin with specific letter in page 
 
$(document).ready(function(){ 
 
    $(".filter-button").ready(function(){ 
 
    var letterAcount = $(".letterA").length; 
 
    var letterBcount = $(".letterB").length; 
 
    var letterCcount = $(".letterC").length; 
 
    var letterDcount = $(".letterD").length; 
 
    var letterEcount = $(".letterE").length; 
 
    var letterFcount = $(".letterF").length; 
 
    var letterGcount = $(".letterG").length; 
 
    var letterHcount = $(".letterH").length; 
 
    var letterIcount = $(".letterI").length; 
 
    var letterJcount = $(".letterJ").length; 
 
    var letterKcount = $(".letterK").length; 
 
    var letterLcount = $(".letterL").length; 
 
    var letterMcount = $(".letterM").length; 
 
    var letterNcount = $(".letterN").length; 
 
    var letterOcount = $(".letterO").length; 
 
    var letterPcount = $(".letterP").length; 
 
    var letterQcount = $(".letterQ").length; 
 
    var letterRcount = $(".letterR").length; 
 
    var letterRcount = $(".letterS").length; 
 
    var letterTcount = $(".letterT").length; 
 
    var letterUcount = $(".letterU").length; 
 
    var letterVcount = $(".letterV").length; 
 
    var letterWcount = $(".letterW").length; 
 
    var letterXcount = $(".letterX").length; 
 
    var letterYcount = $(".letterY").length; 
 
    var letterZcount = $(".letterZ").length; 
 
\t \t 
 
    if($letterAcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterBcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterCcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterDcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterEcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterFcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterGcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterHcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterIcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterJcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterKcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterLcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterMcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterNcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterOcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterPcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    \t  if($letterQcount.length == 0) 
 
\t $(this).addClass('disabled'); 
 
    if($letterRcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterScount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterTcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterUcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterVcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterWcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterXcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterYcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    if($letterZcount.length == 0) 
 
     $(this).addClass('disabled'); 
 
    }); 
 
});

 

 
body { 
 
    font-family: Arial; 
 
    font-size: 14pt; 
 
    font-weight: bold; 
 
    color: #cc6110; 
 
    background-color: #e3e0ce; /* Nenesse 8/17/2017: New color */ 
 
    background-image: url(images/background-woodenfloor.jpg); /* Nenesse 8/16/2017: New background image */ \t 
 
} 
 

 
.title { 
 
    font-size : 24pt; 
 
    font-weight: bold; 
 
    color: #cc6110; /* Nenesse 8/16/2017: New color */ 
 
} 
 

 
a { 
 
    font-size: 14pt; 
 
    color: #285e80; /* Nenesse 8/16/2017: New color instead of #FFFFFF */ 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    text-decoration: underline; 
 
    color: #cc6110; \t 
 
} 
 

 
a:hover img#thumbimage { 
 
    text-decoration: none; 
 
} \t 
 
.artist { \t 
 
    /* Nenesse 8/16/2017: New class for different color */ 
 
    color: #285e80; 
 
    font-size:12pt; 
 
    font-weight:bold; 
 
} 
 

 
.album { \t \t \t \t \t 
 
    /* Nenesse 8/16/2017: new class for different color */ 
 
    color: #cc6110; 
 
    font-size:10pt; 
 
    font-weight:bold; 
 
} 
 

 
.card { 
 
    margin-top: 30px; 
 
    position: inherit; 
 
} 
 

 
.filter-button { 
 
    font-size: 18px; 
 
    border: 1px solid #cc6110; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    color: #cc6110; 
 
} 
 

 
.filter-button:hover { 
 
    font-size: 18px; 
 
    border: 1px solid #cc6110; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    color: #ffffff; 
 
    background: #285e80; 
 
} 
 

 
.btn.filter-button:after { 
 
    background: #285e80; 
 
} 
 

 
.btn-default:active .filter-button:active { 
 
    background: #285e80; 
 
    color: white; 
 
} 
 

 
.btn{ 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    transform: translateZ(0px); 
 
    transition: all 0.5s ease 0s; 
 
} 
 

 
.btn:after{ 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: #fff; 
 
    z-index: -1; 
 
    transform: scaleX(0); 
 
    transform-origin: 100% 50% 0; 
 
    transition: all 0.5s ease-out 0s; 
 
} 
 

 
.btn:hover:after{ 
 
    transform: scaleX(1); 
 
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); 
 
} 
 

 
.row { 
 
    margin-left: 0; 
 
    margin-right:0; 
 
} 
 

 
/* BackToTopPage button */ 
 
.back-to-top { 
 
    position: fixed; 
 
    bottom: 30px; 
 
    right: 30px; 
 
    background: rgb(40, 94, 128); 
 
    background: rgba(40, 94, 128, 0.8); 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    text-decoration: none; 
 
    -webkit-border-radius: 35px; 
 
    -moz-border-radius: 35px; 
 
    border-radius: 35px; 
 
    display: none; 
 
    -webkit-transition: all 0.3s linear; 
 
    -moz-transition: all 0.3s ease; 
 
    -ms-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 

 
.back-to-top i { 
 
    color: #fff; 
 
    margin: 0; 
 
    position: relative; 
 
    left: 16px; 
 
    top: 13px; 
 
    font-size: 19px; 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -ms-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 

 
.back-to-top:hover { 
 
    background: rgba(204,97,16, 0.9); 
 
} 
 

 
.back-to-top:hover i { 
 
    color: #fff; 
 
    top: 5px; 
 
} 
 

 
/* BackToTopPage tooltip */ 
 
.tooltip-inner { 
 
    color:white; 
 
    font-weight:400; 
 
    background-color:rgba(40, 94, 128, 0.9); 
 
} 
 

 
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-top .arrow::before { 
 
    border-top-color: rgba(40, 94, 128, 0.9); 
 
}
<head> 
 
    <meta charset="utf-8"/> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> 
 
    <title>Album List</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"></link> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"></link> 
 
    <link rel="StyleSheet" type="text/css" href="enhanced exportindex_wood.css"></link> 
 
    <meta http-equiv="cache-control" content="no-cache"/> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <a id="back-to-top" href="#" class="back-to-top btn-custom" role="button" title="Go Top" data-toggle="tooltip" data-placement="top"> 
 
     <i class="icon-chevron-up"></i> 
 
    </a> 
 
    <div class="row"> 
 
     <div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center"> 
 
     <h1 class="title">Album List</h1> 
 
     </div> 
 
    </div> 
 
    <div align="center"> 
 
     <button class="btn btn-default filter-button" data-filter="all">All</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterA">A</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterB">B</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterC">C</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterD">D</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterE">E</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterF">F</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterG">G</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterH">H</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterI">I</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterJ">J</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterK">K</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterL">L</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterM">M</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterN">N</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterO">O</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterP">P</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterQ">Q</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterR">R</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterS">S</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterT">T</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterU">U</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterV">V</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterW">W</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterX">X</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterY">Y</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterZ">Z</button> 
 
    </div> 
 
    </div> 
 
    <hr/> 
 
    <div class="row"> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB"> 
 
     <a href="details/8660.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Bolla</h4> 
 
     <p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 1</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB"> 
 
     <a href="details/8666.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Bolla</h4> 
 
     <p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 2</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterJ letterD"> 
 
     <a href="details/8881.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="Image A Journey To Rotterdam"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Jepht&#233; Guillaume | Diephuis</h4> 
 
     <p class="card-text text-center album">A Journey To Rotterdam</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL"> 
 
     <a href="details/412.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="Image La Home Box - Disc 4"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Laurent Garnier</h4> 
 
     <p class="card-text text-center album">La Home Box - Disc 4</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterB"> 
 
     <a href="details/376.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="Image La Home Box - Disc 3"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Laurent Garnier | Traumer | Bambounou</h4> 
 
     <p class="card-text text-center album">La Home Box - Disc 3</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterH"> 
 
     <a href="details/447.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="Image La Home Box - Disc 5"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Laurent Garnier | Traumer | Husbands</h4> 
 
     <p class="card-text text-center album">La Home Box - Disc 5</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterU letterM"> 
 
     <a href="details/305.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="Image La Home Box - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Laurent Garnier | Uner | Marc Romboy</h4> 
 
     <p class="card-text text-center album">La Home Box - Disc 1</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterV letterC"> 
 
     <a href="details/341.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="Image La Home Box - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Laurent Garnier | Voiski | Copy Paste Soul</h4> 
 
     <p class="card-text text-center album">La Home Box - Disc 2</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM"> 
 
     <a href="details/10344.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="Image Dj-Kicks - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Moodymann</h4> 
 
     <p class="card-text text-center album">Dj-Kicks - Disc 1</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM"> 
 
     <a href="details/10307.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="Image Dj-Kicks - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Moodymann</h4> 
 
     <p class="card-text text-center album">Dj-Kicks - Disc 2</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM"> 
 
     <a href="details/10124.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="Image Dj-Kicks - Disc 3"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Moodymann</h4> 
 
     <p class="card-text text-center album">Dj-Kicks - Disc 3</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterS letterL letterA letterR"> 
 
     <a href="details/8897.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="Image Hagagatan Remixed"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Svreca | Lucy | Alexey Volkov | R&#248;dh&#229;d</h4> 
 
     <p class="card-text text-center album">Hagagatan Remixed</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/10673.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="Image North Star/Silent Space"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">Tale Of Us</h4> 
 
     <p class="card-text text-center album">North Star/Silent Space</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/8820.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="Image Goddess Of A New Dawn"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">The Bayara Citizens</h4> 
 
     <p class="card-text text-center album">Goddess Of A New Dawn</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/8719.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="Image Mofo Congoietric"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">The Bayara Citizens</h4> 
 
     <p class="card-text text-center album">Mofo Congoietric</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/9074.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="Image The Girl And The Chameleon - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">The Exaltics</h4> 
 
     <p class="card-text text-center album">The Girl And The Chameleon - Disc 1</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/9033.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="Image The Girl And The Chameleon - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">The Exaltics</h4> 
 
     <p class="card-text text-center album">The Girl And The Chameleon - Disc 2</p> 
 
     </div> 
 
    </div> 
 
    <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT letterJ"> 
 
     <a href="details/8777.html"> 
 
     <img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="Image Joaquin Joe Claussell Mixes"/> 
 
     </a> 
 
     <div class="card-block"> 
 
     <h4 class="card-title text-center artist">The Lower East Side Pipes | Joe Claussell</h4> 
 
     <p class="card-text text-center album">Joaquin Joe Claussell Mixes</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <br/> 
 
    <div class="value col-xs-6 col-sm-6 col-md-6" align="left">20/09/2017 01:14:33</div> 
 
    <div class="value col-xs-6 col-sm-6 col-md-6" align="Right">Powered by 
 
     <a target="_blank" href="https://www.collectorz.com/music" title="Music Collector">Music Collector</a> &amp; JHR Enhanced Details template 
 
    </div> 
 
    <br/> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
    <script src="indexfilter.js"></script> 
 
</body>

感謝。

出典

2017-09-21 Ness Ness

+0

最初のスクリプトエラーを修正します。 –

+0

また、コードの関連部分のみを参照する必要があります。質問にコードを追加するときは、何が起こっているのかを理解するための最小限のコードでなければなりません。だから、私たちはただひとつのhtmlボタンしか必要とせず、基本的には私たちに見せたい機能だけです。 –

+0

コードに複数の構文エラーがあります。最初に修正し、コードスニペットが機能していることを確認してください。 p/s：「長さ」ではなく「長さ」でなければなりません。 – Terry

答えて

0

あなたの重複を削除し、あなたはそれのような何かをすることです何をしたいだろうこれを行うための一つの方法：

$(".filter-button").each(function(idx, item){ 
    let txt = $(item).text(); 
    let className = '.letter' + txt; 
    if($(className).length === 0){ 
    $(item).addClass('disabled'); 
    } 
});

または

$(".filter-button").each(function(idx, item){ 
    let className = $(item).data('filter'); 
    if($(className).length === 0){ 
    $(item).addClass('disabled'); 
    } 
});

Protipを：

一般的に、いつでもあなたは何かを貼り付けるコピーをしたり、同じものを書くのが少しだけ違う例えば

再利用可能な関数に何かを抽出する必要があるか、それともどのように対処しているのかを再考する必要があります。これがループの目的です。

出典

2017-09-21 15:38:28

0

もう一つのヒント：あなたのような何かをすることによって、あなたのletterXcount宣言が非常に短くすることができます：

`` `

let start = 65, 
    end = 91, 
    letters = [], 
    holder = {}; 

// Get every letter of the alphabet 
for(var i = start; i < end; i++) { 
    letters.push(String.fromCharCode(i)); 
} 

// Bind them to a property on an object. 
// You could also use the `window` object to do the same thing. 
letters.forEach(val => { 
    let localLabel = `letter${val}count`; 
    let localVal = $(`.letter${val}`).length; 

    holder[localLabel] = localVal; 
});

` ``

出典

2017-09-21 15:54:42 Pytth

関連する問題

 関連する問題