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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3698 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

按钮

半吊子

以此类推

35 条回复 • 2014-11-09 14:04:47 +08:00

abelyao

2014-11-08 09:34:13 +08:00

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

abelyao

2014-11-08 09:35:07 +08:00

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

Yokira

2014-11-08 09:39:30 +08:00

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

ChiChou

2014-11-08 12:25:51 +08:00

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

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

kxxoling

2014-11-08 12:41:59 +08:00

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

feiyuanqiu

2014-11-08 13:49:29 +08:00

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

grzhan

2014-11-08 13:51:04 +08:00

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

YAFEIML

2014-11-08 13:57:47 +08:00

@feiyuanqiu 对呀对呀

YAFEIML

2014-11-08 13:58:09 +08:00

@abelyao 好惭愧。。

YAFEIML

2014-11-08 13:58:29 +08:00

@Yokira 求JS

YAFEIML

2014-11-08 13:58:40 +08:00

@ChiChou @@

YAFEIML

2014-11-08 13:59:41 +08:00

@grzhan 先谢谢，明天测试

khowarizmi

2014-11-08 15:24:02 +08:00

angular filter search
官方有事例

klam

2014-11-08 17:24:57 +08:00

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

sneezry

2014-11-08 17:48:49 +08:00

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

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

chemzqm

2014-11-08 18:04:01 +08:00

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

YAFEIML

2014-11-08 22:47:17 +08:00

@sneezry 在哪里在哪里

YAFEIML

2014-11-08 22:48:39 +08:00

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

YAFEIML

2014-11-08 22:49:43 +08:00

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

sneezry

2014-11-08 22:51:16 +08:00

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

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

YAFEIML

2014-11-08 22:57:33 +08:00

@sneezry 长宽这网络我也是醉了。。

sneezry

2014-11-08 23:00:33 +08:00

@YAFEIML 那缩进什么的就别计较了

<style>
#li2, #li3, #li4 {
display: none;
}
</style>
<button onclick="show(1)">按钮1</button>
<button onclick="show(2)">按钮2</button>
<button onclick="show(3)">按钮3</button>
<button onclick="show(4)">按钮4</button>
<li id="li1">AAAAAA888AAAAAAA</li>
<li id="li2">AAAAAA666AAAAAAA</li>
<li id="li3">AAAAAA555AAAAAAA</li>
<li id="li4">AAAAAA333AAAAAAA</li>
<script>
function show(n) {
document.getElementById('li1').style.display = 'none';
document.getElementById('li2').style.display = 'none';
document.getElementById('li3').style.display = 'none';
document.getElementById('li4').style.display = 'none';
document.getElementById('li'+n).style.display = 'list-item';
}
</script>

YAFEIML

2014-11-08 23:09:48 +08:00

@sneezry

那个如果li不一定是4条数据呢，也许是3条，也许是5条，或者更多

sneezry

2014-11-08 23:16:46 +08:00 via iPhone

@YAFEIML 那就需要优雅地写出来了，不过不管用什么，一个合适的选择器都是主要的。楼主想要稍微优雅一些的还是直接各种框架搞起

Mutoo

2014-11-08 23:30:32 +08:00

这不就是 jQuery UI 的 tabs 么
http://jqueryui.com/tabs/

ccbikai

2014-11-08 23:35:07 +08:00

<body>
<div id="content">
<div class="btn-group">
<input type="button" class="btn-select" data-attr="888" value="按钮1" />
<input type="button" class="btn-select" data-attr="666" value="按钮2" />
<input type="button" class="btn-select" data-attr="555" value="按钮3" />
<input type="button" class="btn-select" data-attr="333" value="按钮4" />
</div>
<div class="list">
<li>AAAAAA888AAAAAAA</li>
<li>AAAAAA666AAAAAAA</li>
<li>AAAAAA555AAAAAAA</li>
<li>AAAAAA333AAAAAAA</li>
</div>
</div>
</body>

JavaScript:
var show = function(text){
$("li").css('display','none');
$("li:contains(" + text + ")").css('display','block');
};
$('.btn-select').click(function (event) {
var tar = event.target || event.srcElement,
text = tar.getAttribute('data-attr');
show(text);
});

用了 jQuery 的 :contains 选择器

ccbikai

2014-11-08 23:37:48 +08:00

效果 http://jsfiddle.net/zoxhxow4/1/

YAFEIML

2014-11-08 23:41:57 +08:00

@sneezry 嗯嗯，框架的话Bootstrap2有在用，优雅点的似乎很诱人

YAFEIML

2014-11-08 23:43:58 +08:00

@ccbikai 家里渣长宽，周一上单位测试，拜谢先

chemzqm

2014-11-08 23:54:07 +08:00

<div id="btn">
<button onclick="show(this)">1</button>
<button onclick="show(this)">2</button>
<button onclick="show(this)">3</button>
<button onclick="show(this)">4</button>
</div>
<div id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<script>
function show(el) {
var index = 0;
while (el = el.previousSibling) {
if (/^button$/i.test(el.tagName)) {
index++;
}
}
var list = document.getElementById('list');
var childs = Array.prototype.slice.call(list.childNodes);
childs = childs.filter(function(node) {
return /^li$/i.test(node.tagName);
})
childs.forEach(function(li, i) {
if (i === index) {
li.style.display = 'block';
} else {
li.style.display = 'none';
}
})
}
</script>
高效率版，无任何依赖，目测支持ie6+，支持动态增删元素。
这种需求我用 https://github.com/stagas/tabify 这个插件，还有一个更复杂点儿支持排序的
https://github.com/chemzqm/tabs

sneezry

2014-11-09 00:05:01 +08:00

@YAFEIML http://jsfiddle.net/npqh6wg7/

Biwood

2014-11-09 00:47:56 +08:00

@sneezry
@ccbikai
@chemzqm
为什么你们的li外面都不套ul或者ol，这样真的好么

chemzqm

2014-11-09 01:29:51 +08:00

@Biwood 应该套个ul或者ol，大意了

bitwing

2014-11-09 08:55:38 +08:00

@sneezry 不是浏览器的问题，gist 已经被 GFW 认证

YAFEIML

2014-11-09 14:04:47 +08:00

@sneezry
@chemzqm
牛人好多呀