Question

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

每个span都有一个整数id，它来自DB值。我将此ID存储在名为 data-code 的HTML5属性中。

每个div都有一个以空格分隔的整数列表。这些整数中的每一个都是指span的数据代码。它们存储在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 的范围，则最后一个div设置为display:none。
然后，如果我点击带有数据代码3 的span，则没有任何反应，因为没有div，其中data-lst中的所有代码都被禁用（例如“1”，“3”或“1 3”）。
最后，当我点击带有数据代码2 的跨度时，第三和第四跨度设置为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

根据评论，这里是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();
        }
    });
}

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

1 个答案: