複雜的邏輯測試拖動測試拖放項目反對拖放區屬性

Question

我有一個容器中的div列表。我已經有了dragula的設置和工作。每個div都有數據屬性：數據年齡，數據性別，數據等級。並非所有的div都具有所有的屬性。

<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-gender，data-gradestart，data-gradend，data-agestart，data-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> 

因爲項目和拖放區是動態創建的，我不能說，如果所有的數據屬性始終是存在於人或會員降級區。

我正在嘗試創建一個.on('drag',function(source){})，它將使用組中存在的過濾器設置測試，並通過測試運行匹配的人員數據屬性，並在其中任何一個失敗時失敗。

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 

不幸的是我不能把頭繞在這裏知道從哪裏開始。

Answer 1

這是我能夠想到的最好，但它檢查每個組的變量，他們應該在.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'; 
      } 
     } 
    }); 
});