[半吊子码农] 求个筛选的 JS 可好

[YAFEIML]

比如是这个样子的一个，，列表

按钮1 按钮2 按钮3 按钮4
<li>AAAAAA888AAAAAAA</li>
<li>AAAAAA666AAAAAAA</li>
<li>AAAAAA555AAAAAAA</li>
<li>AAAAAA333AAAAAAA</li>

比如点击按钮1，只显示包含888的li，以此类推，li标签可以ID=。

这个、那个，表达可还清楚？

[abelyao]

就按 jQuery 来举个例子吧：
当按钮的点击事件触发的时候，取得它在同辈同类元素中的索引位置(index)；
然后再 hide 所有 li，然后 li[index].show() （仅思路，不是正确语法）把对应的那个 li 显示出来；

[abelyao]

原来上次问 PHP 提取匹配的问题也是你… /t/141010

[Yokira]

可以在CSS里面加2个class，分别设置display为block和none。想让哪个li显示就给它加个block的class，其他的都加none的class就好了吧。

[ChiChou]

可以考虑先把数据序列化成 json；结合 underscore 的数组方法（如 map, filter 等）生成一个数组的拷贝，再用 underscore 的 template 功能渲染到页面上。

Angular 之类大体是这个思路，代码写起来要更清爽一些。楼主要是刚入门，建议 underscore 的方案。

[kxxoling]

前段时间用 Avalon 双向绑定做过一个类似的，大概也是先 json 化数据，循环输出 li 元素，再给 li 加上 ms-if="chosen_text in json.content_text" 过滤实现的（Coffee 写多了，不会写JS了 (/w`\\)

[feiyuanqiu]

你们给楼主说那么多高大上的他也不会弄...我就直接贴代码了
<iframe width="100%" height="300" src="http://jsfiddle.net/zoxhxow4/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

[grzhan]

$(parent_div).on('click', 'button', function(){
var index = $(this).index();
$('li').hide().eq(index).show();
});

[YAFEIML]

@feiyuanqiu 对呀对呀

[YAFEIML]

@abelyao 好惭愧。。

[YAFEIML]

@Yokira 求JS

[YAFEIML]

@ChiChou @@

[YAFEIML]

@grzhan 先谢谢，明天测试

[khowarizmi]

angular filter search
官方有事例

[klam]

@khowarizmi
我也先想到angular，但是如果不用框架都写不出来，那引入angular纯粹是增加项目复杂度

[sneezry]

虽然可以写得更优雅，但我坚信这个是楼主想要的：

https://gist.github.com/Sneezry/237ef5b327df0fc2d23a

[chemzqm]

如果LZ在我们公司，直接一巴掌呼死😠

[YAFEIML]

@sneezry 在哪里在哪里

[YAFEIML]

@khowarizmi
@klam
框架的话，，，那个，，

[YAFEIML]

@chemzqm 我不在码代码公司。。。我是行政经理。。。

[sneezry]

@YAFEIML 晕，个别浏览器好像gist显示不出来……自行去掉一个冒号

https:://gist.github.com/Sneezry/237ef5b327df0fc2d23a