Javascript 将数据属性条件语句传递到循环会导致浏览器崩溃

在代码中，如果您正在单击某个内容，而单击的链接的数据属性与某个部分不匹配，请将其隐藏。我试图通过循环遍历与单击链接的数据属性不匹配的title元素来实现这一点

以下是我的意向说明：

var titles = document.querySelectorAll(".authors-titles")
$(".filter-item").click(function(e) {
  e.preventDefault();

  // get data attribute of clicked link
  var targetLetter = $(this).attr("data-letter");

  // I try to loop through only the titles with data attributes that dont match the clicked link
  // I'm not sure about implementation but basically for titles who aattributes are not equal to the one gotten through the link
  for (var i = 0; i < titles.dataset != targetLetter; i++) {
    // hide the elements that get returned in this loop, in this case the non matched data attributes
    $(".authors-titles").css("display", "none");
  }
});

但是我得到了相同的结果。

是自定义数据属性的对象

$（“.filter item”）。单击（函数（e）{
e、 预防默认值（）；
var letter=this.dataset.letter；
//循环浏览各个部分
$（“.authors titles”）。每个（函数（）{
//仅当标题等于字母时显示节
$（this.toggle）（this.dataset.title==字母）；
});
});






A.
B
c
是否将代码包装在$（function（）{//your code here}）中；或者可能是IIFEI do yes，我不认为这是问题所在，因为我可以看到调用的函数。如果要隐藏与给定属性不匹配的部分，可以只执行
$（'.authors title[data title！=“'+yourtribute+'”]）。hide（）
。不需要手动循环。
<ul id="filter">
        <li><a data-letter="a" href="#" class="filter-item">a</a></li>
        <li><a data-letter="b" href="#" class="filter-item">b</a></li>
        <li><a data-letter="c" href="#" class="filter-item">c</a></li>
      </ul>

<section data-title="a" class="authors-titles">
      <span class="alphabet">#</span>
      <div class="filter-item-grid">
        <div class="filter-item">
          <h3 class="filter-title">1984</h3>
          <p>By: <a href="#">George Orwell</a> </p>
        </div>
        <div class="filter-item">
          <h3 class="filter-title">2001: A Space Oddyseey</h3>
          <p>By: <a href="#">Author C. Clark</a> </p>
        </div>
      </div>
    </section>

for (var i = 0; i < titles.length.dataset != targetLetter; i++) {