我如何计算我的html元素的类改变的次数？
我如何计算我的html元素的类改变的次数？
提问于 2018-08-04 04:19:41
我有3个div类型的元素，可以用bootstrap生成一个carousel。这些div中的每一个都有一个名为'item‘的默认类，当div被选中或可见时，它也具有'active’类。
我想要做的是计算每一项都可见的次数(或者换句话说，有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#生成的。
回答 1
Stack Overflow用户
发布于 2018-08-04 04:55:52
这类事情应该通过挂钩到carousel的控制器中来处理。但是，如果这是不可能的，您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51679603
复制相关文章
相似问题