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

我想知道是否有人知道基于满足使用JQuery的特定条件的属性的2个DIV选择DIV的方式？举例来说，我有一个叫'时间'的变量，现在如果数据输入和数据输出（下面）是'秒'，那么你将如何根据'时间'变量显示相关的DIV。假设下面的所有DIV都被CSS隐藏起来。例如，如果'时间'= 15，它将显示slide1，因为它位于数据输入（10）和数据输出（20）之间，并且如果'时间'= 73，它将显示slide4（数据输入70和数据输出80）。JQuery，根据2个属性条件显示一个元素

下面是代码（非常基本的），提前

<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>

感谢。

来源

2011-01-19 Rob

和'“时间” = 25`？ – Reigel 2011-01-19 01:20:15

你可以做这样的使用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();

编辑：修正了一个错误是由于范围的差距。

来源

2011-01-19 01:19:53 user113716

完美地工作，感谢您花时间看这个。 – Rob 2011-01-19 08:04:18

您需要找到一种方法来遍历这些元素。您可以添加一个类，您可以使用“开始，以”选择（“[ID^=幻灯片]”），也可以使用双属性选择这样的：

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(); 
    } 
});

来源

2011-01-19 01:24:24 typeof

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

回答

相关问题