Question

我想知道是否有人知道如何根据使用JQuery满足某个标准的2个属性来选择DIV？比方说，我有一个名为'time'的变量，现在如果数据输入和数据输出（下面）是'秒'，你将如何根据'time'变量显示相关的DIV。假设下面的所有DIV都被CSS隐藏起来。

例如，如果'time'= 15，它将显示slide1，因为它在数据输入（10）和数据输出（20）之间，如果'time'= 73，它将显示slide4（在数据输入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();

编辑：修正因范围间隙而导致的错误。

Answer 2

您需要找到一种迭代这些元素的方法。你可以添加一个类，你可以使用“开始 - 使用”选择器（'[id ^ = slide]'），或者你可以使用这样的双属性选择器：

var time = 15;
jQuery('[data-in][data-out]').each(function(index, range){
    var $this = $(this),
        dataIn  = $this.attr('data-in'),
        dataOut = $this.attr('data-out');

    if(dataIn < time && time < dataOut) {
        $this.show();
    }
});

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

2 个答案: