色を選択してくださいTreeView

Question

このJSコードでは、親のすべての入れ子要素を緑色に追加しようとしています。クラス 'TreeView-ActiveMoveDanger'を追加しようとしています。残念ながら、これは最初の入れ子にのみ影響します。つまり、ツリーをさらに展開すると、 'TreeView-ActiveToweDanger'クラスを押しても次の要素は追加されません。私の頭は理解できません。何を考えるべきか分かりません。

TreeView Example Image

function getTreeViews(el, move) { 
 
    $('.TreeView').each(function(i, e) { 
 
      if ($(this).hasClass('TreeView-Active')) { 
 
       $(this).removeClass('TreeView-Active'); 
 
      } 
 
      if ($(this).hasClass('TreeView-ActiveMoveDanger')) { 
 
       $(this).removeClass('TreeView-ActiveMoveDanger'); 
 
      } 
 
    }); 
 
    el.addClass('TreeView-Active'); 
 

 
    if (el.attr('data-id') != 0 && !el.hasClass('TreeView-ActiveMove')) { 
 
      var parent_id = el.parent('div').attr('id').split('TreeView-Move-Block-')[1]; 
 
      if ($('#move-row-' + parent_id).hasClass('TreeView-ActiveMove')) { 
 
       el.addClass('TreeView-ActiveMoveDanger'); 
 
      } else { 
 
       var ActiveMove = $('.TreeView-ActiveMove'); 
 
       if (ActiveMove.length) { 
 
        var ActiveMoveld = ActiveMove.attr('data-id'); 
 
        if (el.parents('#TreeView-Move-Block-' + ActiveMoveld).length) { 
 
         el.addClass('TreeView-ActiveMoveDanger'); 
 
        } 
 
       } 
 
      } 
 
    } 
 
}

.TreeView { 
 
\t padding: 5px 0 5px 15px; 
 
} 
 
.TreeView:hover { 
 
\t background: #e4ebfa; 
 
} 
 
.TreeView-Active { 
 
\t background: #e4ebfa; 
 
} 
 
.TreeView-ActiveMove { 
 
\t background: #ace6ac!important; 
 
} 
 
.TreeView-ActiveMoveDanger { 
 
\t background: #f58787!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-xs-12" id="TreeView-Move-Block"> 
 
    <div class="TreeView clearfix pl-30 TreeView-ActiveMove" id="move-row-20" data-id="20" onclick="getTreeViews($(this), false)"> 
 
      Father 
 
    </div> 
 
    <div class="pl-30" id="TreeView-Move-Block-20"> 
 
     <div class="TreeView clearfix pl-30" id="move-row-17" data-id="17" onclick="getTreeViews($(this), false)"> 
 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child-1 
 
     </div> 
 
     <div class="pl-30" id="TreeView-Move-Block-17"> 
 
       <div class="TreeView clearfix pl-30" id="move-row-21" data-id="21" onclick="getTreeViews($(this), false)"> 
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child-2 
 
       </div> 
 
     </div> 
 
    </div> 
 
    <div class="TreeView clearfix pl-30" id="move-row-22" data-id="22" onclick="getTreeViews($(this), false)"> 
 
      Sister 
 
    </div> 
 
</div>

更新| 私は解決策を考え出しました。理想的ではなく働いています。訂正されたJS。それは全く分かりませんでした。
更新| もう一度JSを修正しました。これから我々は上に構築しなければなりません。
更新| 今100％動作します。

Answer 1

Вотмойполностьюрабочийкод

function getTreeViews(el, move) { 
    $('.TreeView').each(function(i, e) { 
      if ($(this).hasClass('TreeView-Active')) { 
       $(this).removeClass('TreeView-Active'); 
      } 
      if ($(this).hasClass('TreeView-ActiveMoveDanger')) { 
       $(this).removeClass('TreeView-ActiveMoveDanger'); 
      } 
    }); 
    el.addClass('TreeView-Active'); 

    if (el.attr('data-id') != 0 && !el.hasClass('TreeView-ActiveMove')) { 
      var parent_id = el.parent('div').attr('id').split('TreeView-Move-Block-')[1]; 
      if ($('#move-row-' + parent_id).hasClass('TreeView-ActiveMove')) { 
       el.addClass('TreeView-ActiveMoveDanger'); 
      } else { 
       var ActiveMove = $('.TreeView-ActiveMove'); 
       if (ActiveMove.length) { 
        var ActiveMoveld = ActiveMove.attr('data-id'); 
        if (el.parents('#TreeView-Move-Block-' + ActiveMoveld).length) { 
         el.addClass('TreeView-ActiveMoveDanger'); 
        } 
       } 
      } 
    } 
}