Question

I have a set of span elements. I also have a set of <div> elements.
When I click on a span, I consider it as “disabled”. In particular, I store the “is disabled” property in an array (false for disabled, true otherwise); all the span elements are enabled at the beginning.

Each span has an integer id which comes from a DB value. I store this id in an HTML5 attribute named data-code.

Each div has a list of white-space separated integers. Each of these integers refer to the span’s data-code. They are stored in the div attribute data-lst.

The following is an example of a possible HTML code:

<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>

When I click on a span, it becomes “disabled” and I have to check if some div can be hidden (by using display:none). A div can be hidden if and only if each integer in data-lst corresponds to the id stored in data-code of a span that “is disabled”.
Some necessary examples:

1. If I click on the span with data-code 1, then the last div is set to display:none.
2. Then, If I click on span with data-code 3, nothing happens, since there is no div with all the codes in data-lst disabled (e.g. “1”, “3” or “1 3”).
3. Finally, when I click on span with data-code 2, then the third and fourth span are set to display:none.

I’m trying to use selectors and JQuery to set display:none to the divs such that the criteria above are satisfied, but I didn’t found a solution at the moment.

A starting peace of code could be the following:

$(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();          

    });
  });
});

What is missing is functionX(), that should select all the divs corresponding to the criteria.

Answer 1

As per comments, Here is the updated jsfiddle and here is the updated code:

$(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();
        }
    });
}