Nis*_*ede 5 html javascript jquery html-lists
将 html 列表设为 ,
<ul id="slider">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="selected"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<ul>
我正在将选定的类添加到任何 li 元素。在这里，我将 class="selected" 添加到第四个 li 元素。
想要在将所选类添加到任何 li 元素时执行一些代码。
试过这个，但没有按预期工作。
<script>
$(function() {
$('#slider').bind('DOMSubtreeModified', function(e) {
alert("Changed");
});
});
</script>
处理这个问题的最佳方法就是在添加类时调用您的函数，因为是您的代码添加它的。
有两种常见的方法可以做到这一点：
您可以通过直接调用来做到这一点：
li.addClass("selected");
doSomethingBecauseItChanged(li);
或者，您可以通过在li其他代码可以侦听的元素上引发您自己的事件来完成此操作，这可以更彻底地将添加类的代码与响应更改的代码分离。
这是监听事件的代码：
$("#slider").on("added-class", function() {
alert("Changed");
});
这是添加类并引发事件的代码：
li.addClass("selected").trigger("added-class");
请注意，这added-class是我编造的名称，而不是已经存在的名称。使用您喜欢的任何名称，只要确保不与现有事件类型冲突即可。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Event Example</title>
<style>
li.selected {
color: green;
}
</style>
</head>
<body>
<p>In two seconds, the third item will turn green and you'll see an alert.</p>
<ul id="slider">
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
</ul>
<script>
$("#slider").on("added-class", function() {
alert("Changed");
});
setTimeout(function() {
$("#slider li").eq(2).addClass("selected").trigger("added-class");
}, 2000);
</script>
</body>
</html>
或者，如果您不需要 IE 支持，您可以使用突变观察器（支持矩阵），但坦率地说，如果您控制添加类的代码，您确实不需要使用它们。