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

Question

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

jqueryjquery-selectors

3

我有一组元素。我还有一组

元素。当我点击一个span时，我认为它是“禁用”的。具体来说，我将“已禁用”属性存储在一个数组中（对于已禁用的，为假；否则为真）。所有的span元素在开头都是启用的。

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

每个div都有一个由空格分隔的整数列表。其中每个整数都指向span的data-code。它们存储在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>

当我点击一个span元素时，它会变成"disabled"状态，然后我需要检查是否可以隐藏一些div元素（使用display:none）。只有当data-lst中的每个整数都对应于一个元素的data-code存储的id并处于“disabled”状态时，才能隐藏该

元素。

以下是一些必要的示例：

如果我点击具有data-code 1的元素，则最后一个
元素将设置为display:none。
然后，如果我单击具有data-code 3的元素，则不会发生任何事情，因为没有所有代码在data-lst中被禁用的
元素（例如“1”，“3”或“1 3”）。
最后，当我单击具有data-code 2的元素时，第三个和第四个元素将设置为display:none。

我尝试使用选择器和JQuery来设置display:none以满足上述条件，但目前还没有找到解决方案。

以下是一个起始的代码片段：

$(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 元素。

- JeanValjean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sahil Kapoor · Accepted Answer

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