当内容中没有字母的类时，将禁用的类添加到字母的过滤器按钮

Question

我的页面有专辑。我根据专辑div中艺术家的第一个字母为每个专辑添加课程以过滤内容。

如果没有艺术家以这个特定的字母开头，那么目的是禁用字母的过滤按钮。

我尝试做某事，但当然，它不起作用，你有什么想法吗？ 相关代码在javascript的第三部分。我对“按字母过滤器”和“滚动到首页”没有任何问题。

// 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;
		
    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');
   	    if($letterQcount.length == 0)
	  $(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 */	
}

.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;	
}

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

.album {					
  /* 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>

感谢您的帮助。

Answer 1

这样做的一种方法是删除你的重复并做你想做的事情就是做一些事情：

Code > Rearrange Code

或

$(".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');
  }
});

您需要将某些内容提取到可重用的函数中，或者需要重新考虑解决它的方式。这就是循环的用途。

Answer 2

另一个提示：您可以通过执行以下操作来缩短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; 
});

```