Question

我想在浏览器中翻转卡片。元素使用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);
  }
});

Answer 1

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

这就是为什么它仅适用于第一个元素的原因。

如果要将其应用于所有元素，则可以使用jQuery并在页面完全加载后注册事件。

<head>

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

    <script>

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

    </script>

</head>

请知道您不需要带foor循环的函数，因为jQuery会在添加新元素时自动应用click事件。

如何使javascript应用于元素列表？

1 个答案: