Question

我在html中有七个div，如果我首先加载html浏览器中的所有div显示。我使用html，css和javascript（jquery）

<section>
  <a href="#">ALL</a> 
  <a href="#">less than 3</a>
  <a href="#">between 2 and 5</a>
  <a href="#">greater than 5</a>

</section>

<div data-filter="1">one</div>
<div data-filter="2">two</div>
<div data-filter="3">three</div>
<div data-filter="4">four</div>
<div data-filter="5">five</div>
<div data-filter="6">six</div>
<div data-filter="7">seven</div>

按照上面的代码，如果我点击全部，那么所有div都显示在屏幕上，如果我点击少于3 那么div只显示div 一个和两个< / strong>，如果我点击 grater than 5 ，则div显示六和七

我的问题我是如何实现的，它可能吗？

感谢

Answer 1

真的，这一切都归结为理解jQuery的基础知识。实现此目的的一个非常简单的功能可能如下：

function show(start, end) {
    target = $('#target')
    on = target.children().slice(start, end)
    on.show()
    target.children().not(on).hide()
}

这是jsFiddle demonstrating it。

Answer 2

Demo

HTML：

<section id="mysection">
  <a href="#">ALL</a> 
  <a data-max="3" href="#">less than 3</a>
  <a data-min="2" data-max="5" href="#">between 2 and 5</a>
  <a data-min="5" href="#">greater than 5</a>
</section>
<section id="target">
    <div data-filter="1">one</div>
    <div data-filter="2">two</div>
    <div data-filter="3">three</div>
    <div data-filter="4">four</div>
    <div data-filter="5">five</div>
    <div data-filter="6">six</div>
    <div data-filter="7">seven</div>
</section>

JS：

var els = document.getElementById('target').children;
document.getElementById('mysection').onclick = function(e) {
    if(e.target.tagName.toLowerCase() !== 'a') return;
    var min = +(e.target.getAttribute('data-min') || -Infinity),
        max = +(e.target.getAttribute('data-max') || Infinity);
    for(var i=0, l=els.length; i<l; ++i) {
        var num = +els[i].getAttribute('data-filter');
        els[i].style.display = min < num && num < max ? '' : 'none';
    }
}

Answer 3

<section>
  <a href="#" onclick="show(0)">ALL</a> 
  <a href="#" onclick="show(1)">less than 3</a>
  <a href="#" onclick="show(2)">between 2 and 5</a>
  <a href="#" onclick="show(3)">greater than 5</a>

</section>

<div data-filter="1" class="one all ltt">one</div>
<div data-filter="2" class="two all ltt">two</div>
<div data-filter="3" class="three all btf">three</div>
<div data-filter="4" class="four all gtt btf">four</div>
<div data-filter="5" class="five all gtt btf">five</div>
<div data-filter="6" class="six all gtt btf gtf">six</div>
<div data-filter="7" class="seven all gtt gtf">seven</div>

<script>
function show(var numbr )
{
switch (numbr)
{
 case 0:
 document.getElementByClass("all").show()
break;
 case 1:
 document.getElementByClass("llt").show()
break;
 case 2:
 document.getElementByClass("ggt").show()
break;
 case 3:
 document.getElementByClass("gtf").show()
break;
}
}
</script>

Answer 4

you can use .gt() and .lt() here:
use following code
 <section>
        <a href="#" id="1">ALL</a>
        <a href="#" id="2">less than 3</a>
        <a href="#" id="3">between 2 and 5</a>
        <a href="#" id="4">greater than 5</a>

    </section>

    <div data-filter="1">one</div>
    <div data-filter="2">two</div>
    <div data-filter="3">three</div>
    <div data-filter="4">four</div>
    <div data-filter="5">five</div>
    <div data-filter="6">six</div>
    <div data-filter="7">seven</div>

 $(document).ready(function () {

        $("a").on("click", function () {
            var anchorId = $(this).attr("id");

            switch (anchorId) {
                case "2":
                    $("div:lt(3)").show();
                    $("div:gt(2)").hide();
                    break;
                case "3":
                    $("div").hide();
                    $("div:lt(6):gt(1)").show();
                    break;
                case "4":
                    $("div:gt(5)").show();
                    $("div:lt(6)").hide();
                    break;
                default:
                    $("div").show();
                    break;
            }
        });
 });

 Don't forget to accept the answer if it works :)

可以过滤div中的数字范围吗？

4 个答案: