Question

我正在尝试做一些我有

的事情

<a href="#" class="alpha" data-letter="A">A</a> B C D E F G H I J K L M N O P Q R S T U V W X Y Z

搜索类型的东西。单击“A”时，我需要在产品标题以字母A开头的页面上找到我的产品。我该怎么做？我认为第一步是隐藏所有产品，然后以某种方式比较标题。以下是我的代码产品的代码：

<article class="product-grid-item product-block" data-product-title="Apple Computer" data-product-id="111" data-category_id="">

  <div class="product-item-details">
      <div class="product-item-brand">Apple</div>

    <h1 class="product-item-title">
      <a href="/macbook-pro" alt="Apple Macbook Pro">Apple Macbook Pro</a>
    </h1>

  </div>
</article>

无论我有多少产品。

//Step 1
$('article').hide();

//Step 2
compare click to title?

Answer 1

真的，没什么大不了的，你几乎写下了你要做的事情，例如隐藏所有节点并选择那些与模式相匹配的节点，或者最终迭代所有节点。简单草案示例：https://jsfiddle.net/prowseed/30vms2eb/

var arts = Array.prototype.slice.call( document.querySelectorAll('.articles .article') );

document.querySelector('.letters').addEventListener('click', function(e){
    if(e.target.innerText.length == 1){
    for (a in arts) {
        if((arts[a].querySelector('.title').innerText)[0].toLowerCase() == e.target.innerText.toLowerCase()){
        arts[a].classList.remove('hidden');
      } else {
          arts[a].classList.add('hidden');
      }
    }
  }
}, null);

此代码中存在大量垃圾，例如检查点击应查找某些属性而不是文本长度，但您有一个基本想法。

点击一个字母，用jQuery显示标题中包含该字母的元素

1 个答案: