2017-10-07 12 views
0

コンテナ内のdivのリストがあります。私はすでにドラッグラをセットアップして働いています。これらのdivのそれぞれには、データ属性(data-age、data-gender、data-grade)があります。すべてのdivがすべての属性を持つわけではありません。ドロップゾーンについては dropzone属性に対するドラッグされた項目をテストするためのドラッグの複合論理テスト

<div data-personaliasid="f193edc1-8f54-474b-bdd6-8c2fe2536513" data- 
fullname="Sophie Kurtis" data-name="Kurtis" data-age="10" data- 
gender="2" data-grade="6" class="well persondiv" style="margin- 
bottom:2px; padding:5px;">...</div> 

は、私はまた、いくつかを持っているdiv要素を持っている/次のデータのすべて/なし属性: data-genderdata-gradestartdata-gradenddata-agestartdata-ageend

<div class="dragula-container memberlist panel-body" id="48aa8cfd-264d- 
4d40-9550-e8741c1b3d41" style="min-height: 100px;" data-gender="1" 
data-gradestart="12" data-gradeend="10" data-agestart="" data- 
ageend="">...</div> 

アイテムやドロップゾーンが動的に作成されるため、すべてのデータ属性は、常に人やメンバーのドロップゾーン上に存在する場合は、私が言うことができません。

グループに存在するフィルタを使用してテストを設定し、一致する人データ属性をテストで実行し、いずれかが失敗した場合は失敗するようにしようとしています。

persondiv data-gender == memberslist data-gender 
persondiv data-age between memberslist data-agestart and data-ageend 
persondiv data-grade(number) between memberslist data-gradestart and data-gradeend 

残念ながら、私は残念ながら、どこで開始するかを知るために頭を抱くことはできません。

答えて

0

これは私が思いつきましたが、各グループの変数をチェックして、それらが.each()関数の前にあって一度だけ呼び出されるべきです。すべてのクラスはクラスで始まり、各テストが失敗すると削除されます。これが最善の方法であるかどうかはわかりませんが、うまくいきます。

.on('drag', function(el){ 
    $('.memberlist').each(function(){ 
     var persongender = $(el).attr("data-gender"); 
     var personage = $(el).attr("data-age"); 
     var persongrade = $(el).attr("data-grade"); 
     var testpassed = 'yes' 


     //Gender Filter Test 
     if(testpassed == 'yes' && $(this).data('gender') !== undefined && $(this).data('gender') !== null) { 
      if(persongender == $(this).data('gender')){ 
       $(this).addClass("dragzone",100); 
       } 
      else { 
       $(this).removeClass("dragzone",1); 
       testpassed = 'no'; 
      } 
      } 
     //Age Filter Test 
     if(testpassed == 'yes' && $(this).data('agestart') !== undefined && $(this).data('agestart') !== null) { 
      if ($(this).data('agestart') <= personage && personage <= $(this).data('ageend')) { 
       $(this).addClass("dragzone",100); 
      } 
      else { 
       $(this).removeClass("dragzone",1); 
       testpassed = 'no'; 
      } 
     } 
     //Grade Filter Test 
     if(testpassed == 'yes' && $(this).data('gradestart') !== undefined && $(this).data('gradeend') !== null && $(this).data('gradeend') !== undefined && $(this).data('gradeend') !== null) { 
      if ($(this).data('gradeend') <= persongrade && persongrade <= $(this).data('gradestart')) { 
       $(this).addClass("dragzone",100); 
      } 
      else { 
       $(this).removeClass("dragzone",1); 
       testpassed = 'no'; 
      } 
     } 
    }); 
}); 
関連する問題