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

Question

我有一组span元素。我也有一套<div>元素。 当我点击一个跨度时，我认为它是“禁用”的。特别是，我将“禁用”属性存储在数组中（false for disabled，true otherwise）;所有span元素都在开始时启用。

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

每个div都有一个由空格分隔的整数列表。每个整数指的是跨度的数据码。它们存储在div属性data-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）被隐藏。当且仅当每个整数在data-lst对应于存储在“禁用”范围的数据代码中的id时，div才可以隐藏。 一些必要的示例：

1. 如果我在跨度点击与数据码1，那么最后一个div被设置为display:none。
2. 然后，如果我用数据代码3点击跨度，则没有任何反应，因为没有数据被禁用的所有代码（例如“1”，“3”或“1 3”） 。
3. 最后，当我点击数据码2的跨度时，则第三个和第四个跨度设置为display:none。

我试图使用选择和JQuery的以显示设置：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

按照意见，这是the updated 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(); 
     } 
    }); 
}