javascirpt如何监控html中某个元素的class属性变化 110
html代码如下：<ulclass="sliders-wrap-inner"><liclass="active"><p>China</p></li><li><p>Ital...
html代码如下：
<ul class="sliders-wrap-inner">
<li class="active"><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
</ul>
在不改变Html的情况下（li不加入class和id） 当ul中的第二个li被jQuery动态地改变class为active 应该如何捕捉该事件 谢谢~ 展开
<ul class="sliders-wrap-inner">
<li class="active"><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
</ul>
在不改变Html的情况下（li不加入class和id） 当ul中的第二个li被jQuery动态地改变class为active 应该如何捕捉该事件 谢谢~ 展开
3个回答
展开全部
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
</head>
<script src="jquery-1.7.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
var li = $(".sliders-wrap-inner li:eq(1)")[0];
//alert(li.length)
li.attachEvent('onpropertychange',function(o){
if(o.propertyName == "className"){
alert(this.className)
}
})
$("button").click(function(){
//alert(li.innerHTML)
li.className = "active";
});
});
//-->
</SCRIPT>
<style>
.active{color:Red;}
</style>
<body>
<ul class="sliders-wrap-inner">
<li class="active"><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
</ul>
<button>as</button>
</body>
</html>
<html>
<head>
<title> new document </title>
</head>
<script src="jquery-1.7.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
var li = $(".sliders-wrap-inner li:eq(1)")[0];
//alert(li.length)
li.attachEvent('onpropertychange',function(o){
if(o.propertyName == "className"){
alert(this.className)
}
})
$("button").click(function(){
//alert(li.innerHTML)
li.className = "active";
});
});
//-->
</SCRIPT>
<style>
.active{color:Red;}
</style>
<body>
<ul class="sliders-wrap-inner">
<li class="active"><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
<li><p>Italy</p></li>
<li><p>Lattice</p></li>
<li><p>China</p></li>
</ul>
<button>as</button>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.live( )
---------------------------------------说明---------------------------------------------
.live( eventType, handler )返回： jQuery
描述： 附加一个事件处理器到符合目前选择器的所有元素匹配，现在和未来。version added: 1.3.live( eventType, handler )eventTypeA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.handler每次事件触发时会执行的函数。version added: 1.4.live( eventType, eventData, handler )eventType一个包含一个JavaScript事件类型的字符串，比如"click"或"keydown"。在jQuery 1.4中，该字符串可以包含多个用空格分隔的事件类型或自定义事件名称。eventData将要传递给事件处理函数的数据映射。handler每次事件触发时会执行的函数。这个方法是基于.bind()方法在元素上绑定事件处理器的一种变化。当.bind()被调用时，该元素的jQuery对象，是指附加处理器的元素;后面引入的让元素不能这样做，所以他们需要另一个.bind()调用。看下面的代码：<body>
<div class="clickme">
Click here
</div>
</body>
我们可以在这个元素上绑定一个简单的点击处理器：$('.clickme').bind('click', function() {
// Bound handler called.
});
当元素被点击时，该处理程序被调用。但是，假设在此之后，另一个因素被增加： $('body').append('<div class="clickme">Another target</div>');这个新元素也匹配.clickme选择器，但因为它是调用.bind()后再添加的 ，点击它什么都不会做。.live()方法提供了一个可以替代的行为。如果我们绑定单击处理器到目标元素使用此方法：$('.clickme').live('click', function() {
// Live handler called.
});再后来加入新元素：$('body').append('<div class="clickme">Another target</div>');然后点击新添加的元素也会触发的处理程序。事件描述.live()方法能影响尚未通过对事件的DOM方法添加的使用元素：绑定到父元素的处理程序是对于那些在其后代触发的事件负责。传递给处理器给.live()从不绑定到一个元素;相反， .live()绑定一个特殊的处理到DOM树的根。在我们的例子，当新的元素被点击，执行以下步骤：一个Click事件生成，并传递到 <div>处理。没有处理器是直接绑定到，因此事件向上冒泡的DOM树。这个时间泡沫，直到它到达树的根，.live()默认情况下结合其特殊的处理。* 在 jQuery 1.4中, 事件冒泡可以随意停在 "context" DOM元素的。特别click通过.live()执行的处理器。此处理程序测试target的事件对象，看它是否应该继续下去。 这项测试是由检查，如果$(event.target).closest('.clickme')是能够找到一个匹配的元素。如果找到一个匹配的元素，原来的处理程序被调用就可以了。因为直到事件发生时在第5步不进行测试，元素可以在任何时候添加，仍然响应事件。.
---------------------------------------说明---------------------------------------------
.live( eventType, handler )返回： jQuery
描述： 附加一个事件处理器到符合目前选择器的所有元素匹配，现在和未来。version added: 1.3.live( eventType, handler )eventTypeA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.handler每次事件触发时会执行的函数。version added: 1.4.live( eventType, eventData, handler )eventType一个包含一个JavaScript事件类型的字符串，比如"click"或"keydown"。在jQuery 1.4中，该字符串可以包含多个用空格分隔的事件类型或自定义事件名称。eventData将要传递给事件处理函数的数据映射。handler每次事件触发时会执行的函数。这个方法是基于.bind()方法在元素上绑定事件处理器的一种变化。当.bind()被调用时，该元素的jQuery对象，是指附加处理器的元素;后面引入的让元素不能这样做，所以他们需要另一个.bind()调用。看下面的代码：<body>
<div class="clickme">
Click here
</div>
</body>
我们可以在这个元素上绑定一个简单的点击处理器：$('.clickme').bind('click', function() {
// Bound handler called.
});
当元素被点击时，该处理程序被调用。但是，假设在此之后，另一个因素被增加： $('body').append('<div class="clickme">Another target</div>');这个新元素也匹配.clickme选择器，但因为它是调用.bind()后再添加的 ，点击它什么都不会做。.live()方法提供了一个可以替代的行为。如果我们绑定单击处理器到目标元素使用此方法：$('.clickme').live('click', function() {
// Live handler called.
});再后来加入新元素：$('body').append('<div class="clickme">Another target</div>');然后点击新添加的元素也会触发的处理程序。事件描述.live()方法能影响尚未通过对事件的DOM方法添加的使用元素：绑定到父元素的处理程序是对于那些在其后代触发的事件负责。传递给处理器给.live()从不绑定到一个元素;相反， .live()绑定一个特殊的处理到DOM树的根。在我们的例子，当新的元素被点击，执行以下步骤：一个Click事件生成，并传递到 <div>处理。没有处理器是直接绑定到，因此事件向上冒泡的DOM树。这个时间泡沫，直到它到达树的根，.live()默认情况下结合其特殊的处理。* 在 jQuery 1.4中, 事件冒泡可以随意停在 "context" DOM元素的。特别click通过.live()执行的处理器。此处理程序测试target的事件对象，看它是否应该继续下去。 这项测试是由检查，如果$(event.target).closest('.clickme')是能够找到一个匹配的元素。如果找到一个匹配的元素，原来的处理程序被调用就可以了。因为直到事件发生时在第5步不进行测试，元素可以在任何时候添加，仍然响应事件。.
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我记得jquery中有方法 但记不住了 你可以去查查
更多追问追答
追问
请问大概是啥方法呢
追答
遍历中有next/nextAll/siblings你自己组合以下就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
