使用jQuery选择器选择复杂元素

Question

我有一组span元素。我还有一组<div>元素。当我点击一个跨度时，我认为它是"禁用的"。特别是，我将"is disabled"属性存储在数组中(false表示禁用，true否则)；所有跨度元素都在开始时启用。

每个跨度都有一个来自DB值的整数id。我将这个id存储在一个名为数据代码的HTML5属性中。

每个div都有一个以空格分隔的整数列表。这些整数中的每一个都指的是跨度的数据代码。它们存储在div属性数据lst中。

以下是一个可能的HTML代码示例：

<span data-code="1">A text</span>|<span data-code="2">Another txt</span>|<span data-code="3">Some text here</span>|<span data-code="4">bla bla</span>
<div data-lst="1 2 3 4">...</div>
<div data-lst="1 3 4">...</div>
<div data-lst="2 3">...</div>
<div data-lst="1 2 3">...</div>
<div data-lst="1">...</div>

当我点击一个跨度时，它会变为"禁用"，我必须检查是否可以隐藏某些div(通过使用display:none)。如果且仅当数据lst中的每个整数对应于存储在"禁用"的span的数据代码中的id时，div才能隐藏。一些必要的例子：

1. 如果单击数据代码为1的span，则最后一个div设置为display:none
2. 然后，如果我用数据代码3点击span，则不会发生任何事情，因为没有禁用数据lst中所有代码的div(例如"1"、"3"或"13")
3. 最后，当我用数据代码2单击span时，第三个和第四个span被设置为display:none

我正试图使用选择器和JQuery将display:none设置为div，以满足上述标准，但目前我还没有找到解决方案。

代码的起始和平可能是以下内容：

$(function(){
var enabled = new Array();
$('span').each(function(i){
enabled[i] = true;
$(this).click(function(){
//Set display:none to all the divs that satisfy the above criteria 
functionX();          
});
});
});

缺少的是functionX()，它应该选择与标准相对应的所有div。

Answer 1

根据评论，这里是更新的jsfiddle，这里是升级的代码：

$(function(){
var enabled = {};
$('span').each(function(){
var $this = $(this);
var id = $this.attr('data-code');
enabled[id] = true;
$this.click(function(){
enabled[id] = false; 
//Set display:none to all the divs that satisfy the above criteria 
functionX(enabled);
});
});
});
function functionX(enabled)
{
$('div:visible').each(function() {
var dataList = $(this).attr('data-lst').split(' ');
var hide = true;
for(var d=0;d<dataList.length;d++)
{
var index = dataList[d];
if(enabled[index])
{
hide = false;
break;
}
}
if(hide)
{
$(this).hide();
}
});
}