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

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

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

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

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

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

@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
牛人好多呀

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/144867

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.