javascript - 如何计算一个类的 html 元素更改的次数？

Question

我有 3 个 div 类型的元素，它们用引导程序制作了一个旋转木马。这些 div 中的每一个都有一个名为“item”的默认类，当 div 被选中或可见时，它也具有“活动”类。

我想做的是计算每个项目可见的次数（或者换句话说，有多少次active上课）。我该怎么做呢？

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div runat="server" id="CarouselHtml" class="carousel-inner" style="height: 500px;">
        Here the code of the slides is generated with the class item               
    </div>

    <a href="#carousel" ID="tagLeft" onclick="waitchange();" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a  href="#carousel" ID="tagR" class="right carousel-control" onclick="waitchange();"; data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

带有项目类的 div 的 html 代码是由 C# 生成的

标签： javascriptjqueryhtmlclass

Answer 1

这种事情应该通过连接到旋转木马的控制器来处理。但是，如果这是不可能的，你可以使用MutationObserver：

$(window).on('load', () => {
  const item = $('#item');
  let lastClassName = item.attr('class');
  let timesChanged = 0;

  const mutationObserver = new MutationObserver((mutations) => {
    console.log('mutation occured');

    const currentClassName = item.attr('class');

    if (currentClassName === 'active' && lastClassName === 'item') {
      timesChanged = timesChanged + 1;
    }
    
    console.log(`times-changed: ${timesChanged}`);

    lastClassName = currentClassName;
  });
  mutationObserver.observe(
    item.get(0), 
    {
      attributes: true,
    },
  );
  
  window.setInterval(
    () => {
      const currentClassName = item.attr('class');

      if (currentClassName === 'item') {
        item.attr('class', 'active');
      } else {
        item.attr('class', 'item');
      }
    }, 
    5000
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
                <div runat="server" id="CarouselHtml" class="carousel-inner" style="height: 500px;">
  </div>
  <div id="item" class="item"
                <a href="#carousel" ID="tagLeft" onclick="waitchange();" class="left carousel-control" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a  href="#carousel" ID="tagR" class="right carousel-control" onclick="waitchange();";  data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" ></span>
                </a>
            </div>
          </div>