点击按钮动态添加的DIV,id和class都相同,切换class的时候所有DIV的class都会变,想要只切换选中的那个DIV,要智能化一点的方法,可以扩展到10个20个
可以动态添加的时候id递增,理论上id是不可以一样的,或者不考虑id的情况下,可以取符合条件的div,然后对第几个进行操作,相当于取出一个div数组,对第几个div进行操作就好了
选中,你如何选中?click选中自己给dom元素添加特殊的样式
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<input type="button" value="添加div" onclick="addDiv()" />
<div id="dvAll"></div>
<style>.active{background:#f00;color:#fff}</style>
<script>
function addDiv() {
$('#dvAll').append('<div id="d" class="xx">'+new Date().getTime()+'</div>')
}
$('#dvAll').on('click', '.xx', function () {
$(this).toggleClass('active')
})
</script>
第一,理论上id不应该一样;第二,要知道如何指定,如果是鼠标点击的话,那么就利用this,获取所在区域的元素,直接操作即可,showbo提供方法就可以,智能只是你想象的,设计id都一样就是一个坑,还是好好学习一下前端的基本规则吧。
如果你是想在添加div的时候获取其中的某一个div,你可以先获取你添加前的div个数,然后按照这个加上1或者2来或者你新添加的div,如果你是在触发click或者其他事件的时候获取,那就直接给创建的div绑定事件,如果是所有div都触发事件,可以用预绑定事件绑定
这要分两种情况。1是在div内部的元素操作这个元素所在的div。2是在div外面的元素操作指定的div。看下面例子:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<style type="text/css">
.select { background-color: #99f; }
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function fu1(t) {
$(t).closest("div").toggleClass("select");
}
function fu2(n) {
$(".cn").eq(n).toggleClass("select");
}
function fu3(t) {
var n = $(t).index();
$(".cn").eq(n).toggleClass("select");
}
</script>
</head>
<body>
<div class="cn">1 <input type="button" value="改变此按钮所在的div" onclick="fu1(this)" /></div>
<div class="cn">2 <input type="button" value="改变此按钮所在的div" onclick="fu1(this)" /></div>
<div class="cn">3 <input type="button" value="改变此按钮所在的div" onclick="fu1(this)" /></div>
<div class="cn">4 <input type="button" value="改变此按钮所在的div" onclick="fu1(this)" /></div>
<br />
<input type="button" value="改变第一个div" onclick="fu2(0)" />
<input type="button" value="改变第二个div" onclick="fu2(1)" />
<input type="button" value="改变第三个div" onclick="fu2(2)" />
<input type="button" value="改变第四个div" onclick="fu2(3)" />
<br />
<div>
<input type="button" value="改变与此按钮在父元素内序号一样的div" onclick="fu3(this)" />
<input type="button" value="改变与此按钮在父元素内序号一样的div" onclick="fu3(this)" />
<input type="button" value="改变与此按钮在父元素内序号一样的div" onclick="fu3(this)" />
<input type="button" value="改变与此按钮在父元素内序号一样的div" onclick="fu3(this)" />
</div>
</body>
</html>
每次添加的DIV给一个唯一的ID记录, 然后把所有ID记录起来. 方便后期操作
var i=0; function submit(){ $(body).append("<div id='"+ i++ +"'></div>"); } //对于想要操作的$("#_id")操作;$(this).addClass("...").siblings("div").removeClass("...");
把上面那行放在点击事件里
动态添加,不应该指定相同的id,可以把id去掉。至于区分选中的div用this就可以了