时间戳

首页 > 解决方案 > 如何使 javascript 适用于元素列表？

javascript - 如何使 javascript 适用于元素列表？

问题描述

我想在浏览器中翻转卡片。这些元素使用 Django 循环模板呈现。我可以翻转第一张牌，但不能翻转其余的牌。我希望他们单独翻转。

这是html：

   {% for element in elements %}
    <div class="outer">
        <div class="inner">

          <div class="card-back">
            <span>{{ content }}</span>
          </div>

          <div class="card-front">
            <span>{{ content }}</span>
          </div>

        </div>
      </div>
    {% endear %}

这是javascript：

# works for the first element
var card = document.querySelector('.inner');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

# this function seems to break things
function() {
  var cards = document.querySelectorAll(".inner");
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
    var card = cards[i];
    clickListener(card);
  }
});

标签： javascripthtmldjango

解决方案

根据Mozilla 文档，document.querySelector()返回一个Element对象，该对象表示与指定的 CSS 选择器集匹配的第一个元素，或者null如果没有匹配项则返回。

这就是为什么它只适用于第一个元素。

如果你想在所有元素上应用这个，你可以使用 jQuery 并在页面完全加载时注册事件。

<head>

    <script src="https://code.jquery.com/jquery-3.3.1.js">

    <script>

        $(document).ready(function()
        {
            $(".inner").on('click', function(event)
            {
                var card = event.target;
                card.classList.toggle('is-flipped');
            });
        });

    </script>

</head>

重要提示：您不需要带有for循环的函数，因为每当添加新元素时，jQuery 都会自动应用 click 事件。

推荐阅读