3

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

每个跨度都有一个来自 DB 值的整数 id。我将此 id 存储在名为data-code的 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中的每个整数对应于存储在“已禁用”的 span 的 data-code 中的 id时，才能隐藏 div 。一些必要的例子：

  1. 如果我单击带有data-code 1的跨度，则最后一个 div 设置为display:none.
  2. 然后，如果我点击带有data-code 3的 span ，什么也不会发生，因为没有 div 中的所有代码都被禁用（例如“1”、“3”或“1 3”）。
  3. 最后，当我点击带有data-code 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。

4

1 回答 1

3

根据评论，这是更新的 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();
        }
    });
}
于 2012-09-26T19:00:29.800 回答