3

span私は要素のセットを持っています。一連の<div>要素もあります。スパンをクリックすると、「無効」と見なされます。特に、「isdisabled」プロパティを配列に格納します（無効の場合はfalse 、それ以外の場合はtrue）。すべてのスパン要素は最初に有効になります。

各スパンには、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の各整数が、「無効」になっているスパンのデータコードに格納されているIDに対応している場合にのみ、divを非表示にできます。いくつかの必要な例：

  1. データコード1のスパンをクリックすると、最後のdivがに設定されdisplay:noneます。
  2. 次に、 data-code 3でspanをクリックしても、data-lstのすべてのコードが無効になっているdivがないため（「1」、「3」、「1 3」など）、何も起こりません。
  3. 最後に、データコード2のスパンをクリックすると、3番目と4番目のスパンがに設定され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 に答える