Question

我正在破解这个Codepen jQuery过滤器以适应我的项目，我希望用按钮替换下拉列表。我确信这很简单，但我无法理解。我的模板（只是一个Bootstrap启动器）已经有按钮的CSS样式 - 只需要弄清楚如何处理HTML和JS来获取按钮而不是下拉。有问题的代码位： //过滤新闻 $（'select＃sort-news'）。change（function（）{ var filter = $（this）.val（） filterList（过滤器）; }）; //新闻过滤功能 function filterList（value）{ var list = $（“。news-list .news-item”）; $（名单）.fadeOut（ “快”）; if（value ==“All”）{ $（“。news-list”）。find（“article”）。each（function（i）{ $（本）.delay（200）.slideDown（ “快”）; }）; } else { //注意这个* =“＆lt; - 这意味着如果数据类别包含多个选项，它将找到它们 //例如：data-category =“Cat1，Cat2” $（“。news-list”）。find（“article [data-category * =”+ value +“]”）。each（function（i）{ $（本）.delay（200）.slideDown（ “快”）; }）; } } 身体 { font-family：“Helvetica Neue”，Helvetica，Arial，sans-serif; } .news-item {display：inline-block;垂直对齐：顶部;宽度：300像素;} ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆lt; h2＆gt;排序新闻＆lt; / h2＆gt; ＆lt; select name =“sort-news”id =“sort-news”＆gt; ＆lt; option value =“All”＆gt;所有新闻＆lt; /选项＆gt; ＆lt; option value =“Cat1”＆gt; Category 1＆lt; / option＆gt; ＆lt; option value =“Cat2”＆gt; Category 2＆lt; / option＆gt; ＆lt; option value =“Cat3”＆gt; Category 3＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; hr /＆gt; ＆lt; section class =“news-list”＆gt; ＆lt; article class =“news-item”data-category =“Cat1”＆gt; ＆lt; div class =“thumb”＆gt; ＆lt; img alt =“我们的ALT文本在这里”title =“我们的标题在这里”src =“http://placehold.it/150x150”＆gt; ＆LT; / DIV＆GT; ＆lt; div class =“news-txt”＆gt; ＆lt; h3＆gt;＆lt; a href =“”＆gt;新闻标题＆lt; / a＆gt;＆lt; / h3＆gt; ＆lt; p＆gt; Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ...＆lt; / p＆gt; ＆LT; / DIV＆GT; ＆LT; /冠词GT; ＆lt; article class =“news-item”data-category =“Cat2”＆gt; ＆lt; div class =“thumb”＆gt; ＆lt; img alt =“我们的ALT文本在这里”title =“我们的标题在这里”src =“http://placehold.it/150x150”＆gt; ＆LT; / DIV＆GT; ＆lt; div class =“news-txt”＆gt; ＆lt; h3＆gt;＆lt; a href =“”＆gt;新闻标题＆lt; / a＆gt;＆lt; / h3＆gt; ＆lt; p＆gt; Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ...＆lt; / p＆gt; ＆LT; / DIV＆GT; ＆LT; /冠词GT; ＆lt; article class =“news-item”data-category =“Cat3”＆gt; ＆lt; div class =“thumb”＆gt; ＆lt; img alt =“我们的ALT文本在这里”title =“我们的标题在这里”src =“http://placehold.it/150x150”＆gt; ＆LT; / DIV＆GT; ＆lt; div class =“news-txt”＆gt; ＆lt; h3＆gt;＆lt; a href =“”＆gt;新闻标题＆lt; / a＆gt;＆lt; / h3＆gt; ＆lt; p＆gt; Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ...＆lt; / p＆gt; ＆LT; / DIV＆GT; ＆LT; /冠词GT; ＆LT; /节＆gt; ＆lt; script src =“https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-12/jquery-2.0.3.min_1.js”＆gt;＆lt; / script＆gt;

Answer 1

替换它：

<select name="sort-news" id="sort-news">
    <option value="All">All news</option>
    <option value="Cat1">Category 1</option>
    <option value="Cat2">Category 2</option>
    <option value="Cat3">Category 3</option>
</select>

使用：

<button value="All">All news</button>
<button value="Cat1">Cat1</button>
<button value="Cat2">Cat2</button>
<button value="Cat3">Cat3</button>

和此：

$('select#sort-news').change(function(){...

使用：

$('button').click(function() {...

如何从<select>下拉到按钮更改此codepen jQuery过滤器？

1 个答案: