主页 / 问题 / 980831
Accepted
Air
Asked:2020-05-13 17:47:18 +0000 UTC2020-05-13 17:47:18 +0000 UTC

角-1。如何正确循环遍历循环中的元素？

  • 772

同事，为了清楚起见，有这样一个例子

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

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

我想知道如何在*Angular-1*

我的尝试...

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

app.directive('liExample', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      //element.addClass('li-example-active'); Почему данный вариант **JQUERY** за пределами цикла forEach работает
      angular.forEach(element, i => {
        scope.functionClick = function() {
          i.classList.add('li-example-active'); // хотя прекрасно работает класический вариант js добавления и удаления *class*
          //i.addClass('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;
  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="functionClick()"><span>{{example}}</span></li>
</menu>
<html>

以及如何在这个版本中实现这个例子，就像在 JS 的第一个经典版本中一样？？？？这样被点击的元素被分配了类li-example-active，其余的被删除了类li-example-active？？？

另外我想问一下我是否理解正确，没有angular.forEach(element, i => {})像经典版本的js那样的三个参数`Array.forEach（（s，i，arr）=> {}）`，而是一个？

还有一个类似示例的变体，具有不同的实现，也有问题

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的第一个经典版本中一样？？？？

而且这个例子不是很重要，那么简单，对于一般的开发....

* {
  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 span {
  background-color: green;
}

li.li-example span.span-active {
  background-color: blue;
}
<html ng-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-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>

</menu>
<html>

问题....为什么在这个变体中没有ng-repeat class="span-active"接收所有元素Span，而不是其父被点击的那个....

javascript

1 个回答

  1. Best Answer

    使用 Angular 时，最好从数据开始，而不是从标记开始。

    这种情况下的问题是，从数据端来看，只有一个数组，并且无法以任何方式确定究竟选择了什么，因此尝试使用 DOM 元素来计算它。selected相反，添加一个字段并将所选元素的索引存储在其中就足够了。进一步，ng-repeat只需检查当前index和选定的，如果它们匹配，设置类。标准指令就足够了ng-class。

    结果是以下代码：

    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'];
      scope.selected = 0;
      scope.functionClick = function(index) {
        scope.selected = 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">
<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-class="{'li-example-active':selected==$index}" ng-repeat="example in myExample" ng-click="functionClick($index)"><span>{{example}}</span></li>
</menu>
<html>

    //element.addClass('li-example-active'); Почему данный вариант **JQUERY** за пределами цикла forEach работает
// потому что `element` - это jqLite объект, а следовательно у него есть все необходимые методы
angular.forEach(element, i => {
    scope.functionClick = function() {
      i.classList.add('li-example-active'); // хотя прекрасно работает класический вариант js добавления и удаления *class*
      //i.addClass('li-example-active');// а в цикле не работает
      // потому что как и в любом другом обходчике в callback передается **HTMLElement** а не jqLite обертка.

    我是否正确理解 angular.forEach(element, i => {}), 没有像经典版本 js 中的三个参数 `Array.forEach((s, i, arr) => {})`，但是一个？

    不，不正确。具体定义可以看帮助

    该iterator函数被调用iterator(value, key, obj)

    还有一个类似示例的变体，具有不同的实现，也有问题

    范围的问题：ng-repeat- 创建自己的范围，因此，在每次迭代中，每个元素都有自己的属性active，因此它们彼此独立变化。

    这个例子不是很重要。

    该错误与前一个相反：由于每个元素没有单独的范围，因此active所有元素都有一个，这会影响结果。

    • 1

相关问题