JQuery，根据2个属性条件显示元素

Question

我想知道是否有人知道使用 JQuery 根据满足特定条件的 2 个属性来选择 DIV 的方法？举例来说，我有一个名为“时间”的变量，现在如果数据输入和数据输出(如下)是“秒”，那么如何根据“时间”变量显示相关的 DIV。假设下面所有的 DIV 都被 CSS 隐藏了。

例如，如果'time'=15，它将显示幻灯片1，因为它位于数据输入(10)和数据输出(20)之间，如果'time'=73，它将显示幻灯片4(在数据输入70和数据输出之间)数据输出 80)。

这是代码(非常基本)，

<div id="slide1" data-in="10" data-out="20" name="slide1"></div> 
<div id="slide2" data-in="30" data-out="40" name="slide2"></div> 
<div id="slide3" data-in="50" data-out="60" name="slide3"></div> 
<div id="slide4" data-in="70" data-out="80" name="slide4"></div> 
<div id="slide5" data-in="90" data-out="100" name="slide5"></div>

提前致谢。

Answer 1

您可以使用filter()^(docs)这样做:

示例: http://jsfiddle.net/3vDcb/4/

var time = 35;

$('div[name^=slide]').filter(function() {
    var data_in = $(this).attr('data-in');
    var data_out = $(this).attr('data-out');

    return time >= data_in && time <= data_out;
}).show();

<小时/>

编辑:修复了由于范围间隙而导致的错误。