Question

在这个JS代码中，我尝试将父项的所有嵌套元素添加到绿色元素中，我尝试添加类＆＃39; TreeView-ActiveMoveDanger＆＃39;。不幸的是，这只会影响第一个嵌套，也就是说，如果进一步展开树，则不会通过按下TreeView-ActiveToweDanger＆＃39;来添加以下元素。我不明白，我不知道该怎么想。

TreeView Example Image

＆＃13;

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');
                    }
               }
          }
     }
}

＆＃13;

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

＆＃13;

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

＆＃13;

更新| 我提出了一个解决方案，不理想，但工作。纠正了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');
                    }
               }
          }
     }
}

选择颜色儿童TreeView

1 个答案: