Question

同事们，有这样一个例子来说明问题。

[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
  s.addEventListener('click', function() {
    [...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
      arr[i].classList.remove('li-example-active');
    })
    arr[i].classList.add('li-example-active');
  })
})

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}
li.li-example-active{
  background-color: #00c;
}

<menu class="example">
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
</menu>

我认为没有必要解释上面示例中发生的事情。

以及有关AngularJS的示例

const app = angular.module('app', []);

app.directive('example', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
    }
  }
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}

<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample"
      ng-click="active = !active" 
      ng-class="active ? '' : 'li-example-active'">
      <span>{{example}}</span>
  </li>
</menu>
<html>

以及如何在此变体中实现第一个经典变体JS中的示例？这样，将被单击的元素分配给类别li-example-active，其余的元素都删除了类别li-example-active ???

Answer 1

创建一个数组和一个操作该数组的函数。

在HTML中使用它们

<menu class="example">
  <li class="li-example" ng-repeat="example in myExample"
      ng-click="makeActive($index)" 
      ng-class="{'li-example-active': activeArr[$index]}">
      <span>{{example}}</span>
  </li>
</menu>

在控制器中实现它们

app.controller('example', function($scope) {
     $scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
     $scope.activeArr = $scope.myExample.map(_ => false);
     $scope.makeActive=function(index) {
         Object.keys($scope.activeArr).forEach( _ => {
              $scope.activeArr[_] = (_ == index);
         });
     };
});

演示

const app = angular.module('app', []);

app.controller('example', function($scope) {
     $scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
     $scope.activeArr = $scope.myExample.map(_ => false);
     $scope.makeActive=function(index) {
         Object.keys($scope.activeArr).forEach( _ => {
              $scope.activeArr[_] = (_ == index);
         });
     };
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}

<html ng-app="app" ng-controller="example">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample"
      ng-click="makeActive($index)" 
      ng-class="{'li-example-active': activeArr[$index]}">
      <span>{{example}}</span>
  </li>
</menu>
<html>

AngularJS添加-从ng-repeat列表中删除类

1 个答案:

演示