点击按钮动态添加DIV时,添加了两个相同的DIV,现在要对其中指定的一个进行操作,应该如何区分? 5C

点击按钮动态添加的DIV,id和class都相同,切换class的时候所有DIV的class都会变,想要只切换选中的那个DIV,要智能化一点的方法,可以扩展到10个20个

0

9个回答

选中,你如何选中?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>
3
caozhy
贵阳挖掘机马善福,自备车辆专业挖游泳池 可以采纳这个回答了。非常对!
11 个月之前 回复

动态添加,不应该指定相同的id,可以把id去掉。至于区分选中的div用this就可以了

2

可以动态添加的时候id递增,理论上id是不可以一样的,或者不考虑id的情况下,可以取符合条件的div,然后对第几个进行操作,相当于取出一个div数组,对第几个div进行操作就好了

0

第一,理论上id不应该一样;第二,要知道如何指定,如果是鼠标点击的话,那么就利用this,获取所在区域的元素,直接操作即可,showbo提供方法就可以,智能只是你想象的,设计id都一样就是一个坑,还是好好学习一下前端的基本规则吧。

0

如果你是想在添加div的时候获取其中的某一个div,你可以先获取你添加前的div个数,然后按照这个加上1或者2来或者你新添加的div,如果你是在触发click或者其他事件的时候获取,那就直接给创建的div绑定事件,如果是所有div都触发事件,可以用预绑定事件绑定

0

这要分两种情况。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>


0

每次添加的DIV给一个唯一的ID记录, 然后把所有ID记录起来. 方便后期操作

0
var i=0; function submit(){ $(body).append("<div id='"+ i++ +"'></div>"); } //对于想要操作的$("#_id")操作;
0

$(this).addClass("...").siblings("div").removeClass("...");
把上面那行放在点击事件里

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击按钮,div隐藏
请教——rn点击“销售”,红色部分的div隐藏,能用css的尽量不用JSrnrnrnrnrnrn rn 店员rn rn rnrnrn rn rn rn 查询rn 销售rn rn rn rn [color=#FF0000]rn rn rn 销售情况rn 库存情况rn 退货情况rn rn rn [/color] rn rn rnrnrn
点击按钮移动DIV
[code=html]rnrnrn 点击按钮让DIV层弹性移动rn rn rn rnrnrn rnrnrnrn[/code]rn如code标题,这段代码在IE里要允许运行ActiveX控件才能运行,在谷歌浏览器根本运行不起来。rn求兼容谷歌浏览器的修改方法。
点击按钮div变色
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;点击按钮div变色.html&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;/head&gt; ...
点击按钮显示隐藏div
//测试点击按钮div出现,再次点击div关闭 &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; function ClickMenu(diving) { //alert(diving); if (document.getElementById(diving).style.display == &quot;none&quot;) { document.getElementById(divin...
jQuery实现点击按钮显示隐藏指定信息(div)
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;/jquery/jquery.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; $(document).ready(function(){ $(&quot;but
如何点击一个按钮以后把DIV放入指定的TD
如何点击一个按钮以后把DIV放入指定的TD??
在下动态添加一个div
要实现的效果:rn[img=http://p.blog.csdn.net/images/p_blog_csdn_net/millfox/408831/o_demo.gif][/img]rnrn就是当点击text时,在下面动态生成一个DIV,这个DIV要在text的正下方出现,而且宽度与text的宽度相同。当这个控件放置在页面任何地方,这个DIV都能符合要求出现。rnrnPS:各位大侠,一定要兼容IE,Firefox和Opera,多谢rnrn代码如下:rnrn[code=HTML]rnrnrnrnrnrn Testrn rnrnrnrnrn rnrnrnrnrnrnrnrnrnrnrnrnrn[/code]
多个相同ID的DIV,怎么进行操作?
[code=HTML] rn rn rn AAA rn BBBrn CCC rn DDDrn EEErn FFF rn GGGrn rnrn rn "rnrn[/code]rnrn当我onclick 的时候,怎么让他执行相似但不同的操作,就是执行的代码相同,但是代码中调用的函数是不选用的参数,比如,我点显示AAA的DIV,下面的函数中,show的aa参数就变成'X',点BBB的DIV,aa就变成'Y'rn[code=JScript]rnfunction onclick ()rnrn show(aa)rnrn[/code]
动态添加div
[code=C#]rn private void PlanBound(string areaId)rn rn List plans = new GraveManage().Graves_QueryPlanView(areaId);rn ViewState["plan"] = plans;rn StringBuilder sb = new StringBuilder(" " + " " + subName + " " + "(" + boxes + ")" + " " + min + "~" + max + " " + zhan + "";rn sb.Append(divStr);rn rn sb.Append("");rn ScriptManager.RegisterStartupScript(this, this.GetType(), "plan", "setPlan(\""+sb.ToString().Replace("\"","'")+"\")", true);rn rn[/code]rn[code=HTML]rn setPlan = function (planStr) rn $("#planlay").remove();rn $(planStr).appendTo('body');rn rn[/code]rn下图效果[img=http://hi.csdn.net/attachment/201108/23/4047181_1314090877oHNd.jpg][/img]rnrn需要效果:[img=http://hi.csdn.net/attachment/201108/23/4047181_1314090803LRxw.jpg][/img]rnleft top 均无效
点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏
当点击按钮后显示隐藏层,满足鼠标在div里操作不隐藏,在外边点击会消失的功能。                                 逻辑上主要是阻止浏览器的冒泡                                             //点击#btnClick时要阻止冒泡,否则.pop是不显示的,         //因为冒泡了,会执行到下面
点击右键和按钮进行显示隐藏div
代码如下: Document *{cursor: pointer;} #nav { width: 200px; height: 500px; background-color: red; border: 1px solid r
点击DIV里的DIV
一个[color=#FF0000]大[/color]的DIV里嵌套几个[color=#008080]小[/color]的DIV,如何获取onmousedown在[color=#FF0000]大[/color]的DIV的点击坐标(offsetXY)?
在页面弹出一个div,里面添加了一个Object播放视频,隐藏div如何删除object
在页面弹出一个div,里面添加了一个Object播放视频,隐藏div如何删除objectrnrn[code=javascript]rnfunction show_video(video_url)rn var objs = "";rn objs += "";rn objs += "";rn objs += "";rn objs += "";rn objs += "";rn objs += "";rn objs += " 关闭";rn $("#dis_video").html(objs);rn rn $("#dis_video").css( rn "display": "block",rn "position": "absolute", rn "width": 500, rn "height": 440,rn "top": (document.documentElement.clientHeight-440)/2+$(document).scrollTop(), rn "left": (document.documentElement.clientWidth-500)/2 rn );rnrn $('#dis_video').toggle(500, function()rn $(this).slideDown(500);rn );rn rn $("#dis_video p").click(function()rn $("#dis_video").html();rn $("#dis_video").empty();rn $("#dis_video").hide(500);rn );rn rnrnrn[/code]rnrn直接把div empty(),播放器也隐藏不了。。不知hide div时将object删除,隐藏.
两个单选按钮,点击其中一个隐藏或显示其他的div
HTML代码 &lt;div class="am-u-sm-9 am-u-end"&gt; &lt;input type="radio" onClick="return diva()" class="tpl-form-input" name="article[activity_publish]" value="1" checked="checked";&gt;手动发布 &lt;i...
两个div刷新其中一个,不用ajax
请教一个页面里有两个DIV,其中一个(div1)要更新,另一个(div2)则不要更新。rn想要实现的效果是这样的:有两个层,div1里面有表单,要跳转到其它页面执行,然后再跳转回来显示。而div2则不需要更新,就是div1跳转只刷新div1的内容。这里不用ajax是因为跳转后的页面太复杂,跳转好几个页面,用ajax不好处理。rnrn谁能帮我想一个div的里面类似嵌套一个网页,只刷新这个层里面的网页,而不会刷新其它的。谢谢 rn
通过jQuery实现点击按钮,隐藏一个div,显示另一个div
这种方式可以避免跳转页面,在一个页面中显示不同的结果。 &lt;div id="div1" style="width:150px;height:50px;background-color:springgreen;"&gt; 这是第一个div &lt;/div&gt; &lt;div id="div2" style="width:150px;height:5...
在一个div中点击增加按钮弹出另个div
![图片说明](https://img-ask.csdn.net/upload/201601/21/1453354461_247472.png)n集体的效果如图所示,请大神们帮帮我!
点击文字或按钮弹出一个DIV窗口(DIV悬浮窗口)
以下是弹出窗口代码: &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;点击文字弹出一个DIV层窗口代码&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; ...
动态添加的div其中的图片不显示?
div.insertAdjacentElement("beforeEnd",new_div);rn这样添加的div,里面包含的图片不显示,必须点“显示图片”,应该是没下载下来,但是用ie7都没有问题?rn有解决办法吗
如何设置两个div相同的高度?
现在有两个div分别为divA和divB,divB的高度随着其内容的高度变化而变化,而divA得高度是随着divB的高度永远保持一样高,这该怎么做?
点击按钮div层弹出,点击空白处div隐藏
实现效果:点击按钮div层弹出,点击空白处div隐藏。 以下是代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> //样式很丑自己重新定义 #divTop{position: absolute;top
div 点击切换按钮样式
首先,大家需要定义两个css 样式,一个为选中后的样式,另一个是不被选中的样式,这里做一个例子: .selectMenu{cursor:pointer;width:100%;height:30px; float:left;margin-top:3px;font-family : 微软雅黑; background-image: url('../image/backgroundimage.png')
点击按钮移除整个DIV
div class=“pasteImg”> button type='button' class='close' style='margin-bottom: -7px'>×button> div> js代码: $('.close').click(function(){ $(this).parent().remove(); })
点击按钮弹出div层
点击一个按钮即可弹出div层,背景阴影,div层可以关闭,在点击按钮即可在此弹出。可调用iframe或者直接代码
div随点击的按钮移动
如现在页面上有5行以及一个隐藏的DIV,每行都有一个按钮,现在我想点击按钮是显示DIV,[color=#FF0000]而且DIV的位置与点击的按钮的位置保持在一行上[/color],如何实现,急用,等待高手解答!!
点击一个按钮后怎么调用div
rn rn rn rn rn rn 我们正在为您检索,这可能需要一些时间,请稍等……rn rn rn rn rn rn这段div的效果如下(效果显示不出来)rnrn 然后点击按钮 rnrn 即可显示上边的效果,请问是怎么调用到的,SubmitForm里边应该添加什么代码
怎么指定一个DIV
rnrnrnrnrn需要在Form中的HTML代码内指定一个DIV,以便向其中动态插入hidden域。rnrnrnrnrn怎么指定一个DIV
如何指定div的长度?
我想用div划一个框 指定初始长度宽度,rn如果内容不超过就以指定的长度显示,如果内容超过则自己调整 。rn 这该怎么实现呢?
点击div块进行文本编辑
工作需要,需要实现如下一个需求,点击模板div块,跳出文本编辑器对div文本内容进行编辑。实现效果图如下: 实现思路如下: 1.给每个需要编辑的div加上contenteditable=&amp;amp;amp;amp;amp;amp;amp;quot;false&amp;amp;amp;amp;amp;amp;amp;quot;属性,表示暂不可编辑,之后写一个点击事件,点击当前div将当前div的contenteditable属性改为true,其他div都改为false。 2.第二步点击右侧文本编辑时,
鼠标移开DIV或点击时,如何隐藏DIV?
我在网上找到一段JS代码,实现鼠标经过按钮时弹出DIV,但是没有鼠标移出DIV或点击DIV时隐藏DIV,有谁帮我改下?我想把它改为任意文字,或按钮的下拉菜单(不是一整行 或 的下拉菜单)。rnrnrnrn Untitled Pagernrnrn rn rnrn rnrn
如何刷新指定div?
各位大神,我的页面是这样的,其中有一个div是下拉选筐,默认值为1,rnrn rn 1 rn 2rn 5rn 10rn rn我想实现,当选择为10时,就重新刷新这个div(刷新整个页面太耗时了),使他的选择值为初始状态的1(这只是个例子,我知道这个例子有点傻),我该怎么实现呢?rnrn谢谢各位大神,谢谢谢谢!
动态添加控件到DIV,如何自动换行
页面中一个divrn rn后台循环给DIV添加LinkButton rn LinkButton tmplb = new LinkButton();rn tmplb.Text = dtAttach.Rows[i]["aa_title"].ToString();rn tmplb.ID = filename;rn tmplb.Click += new EventHandler(LinkButton1_Click);rn span1.Controls.Add(tmplb);rn如何显示的时候,一个button就是占一行?现在是全部排在一行,DIV相关的一些样式也设置了,好像都没用.
点击div外部,自动隐藏div
效果: 点击标签列表外部,自动收起标签列表   方法:采用阻止冒泡 //点击标签列表外部自动收起列表 function stopFunc(e) { e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; } document.onclick = function(...
jquery 得到指定div下面的指定div
rn 1rn 2rn 3rn 4rn 5rn
webform在指定的div中添加动态添加label
RT
两个div如何并排????
界面中实现:rn a brn其中: a 、 b 均为div
请教怎么点击一个新增的按钮时弹出div
大侠们,我现在遇到一个这样的问题,是做一个添加问题时的一伙~~请大家多帮忙啊~~在这里谢谢大家了 !rn我现在点击jsp页面上的添加按钮,调用一个js方法,可以弹出div,这个div是填写要添加的问题的信息的,这个div里面还包括了问题的类别,所有要在action中进入这个添加框时要获取到一些数据,但是那个action的方法肯定要在.xml文件里面的返回值返回一个页面呀,如果我在这里返回那个有添加按钮的页面,这样一来,一刷新页面,那个添加的div不是又关闭了么??所以在这里请教哪些知道这个问题的大侠们多帮助啊!!谢谢各位啊..
请问:在DIV中动态添加DIV子控件
请教:rnrn如何动态在 中添加一个或者多个 rnrn添加之后马上就要引用,innerHtml添加的不能当时作为控件引用,已经测试过了rnrn动态添加之后,要求马上在C#中要能够通过FindControl获得这个动态添加的DIV控件,innerHtml添加的控件不能在添加的同一事件中通过FindControl获得,而加入这个控件之后马上要对这个控件进行进一步的属性和内容赋予,必须获得这个控件
如何点击按钮显示一个DIV,点击页面其它地方隐藏这个DIV?
页面上有个按钮,默认有个DIV是隐藏起来的。我是这样写的:rnrnfunction ShowFinishEditor(left, top) rn var obj = document.getElementById('divFinishEditor');rn if (obj == null)rn return false;rn obj.style.display = '';rn obj.style.posLeft = left;rn obj.style.posTop = top;rn rn return false;rnrnrnfunction HideFinishEditor() rn var obj = document.getElementById('divFinishEditor');rn if (obj == null)rn return false;rn obj.style.display = 'none';rnrnrndocument.onclick = HideFinishEditor;rndocument.getElementById('button1').onclick="ShowFinishEditor(this.getBoundingClientRect().left, this.getBoundingClientRect().top+this.offsetHeight);"rnrn怎么每次点击按钮的时候总要先调用ShowFinishEditor然后又调用HideFinishEditor啊?所以每次都显示不出来。怎么办?
两个div,知道其中一个div的高度或宽度,怎么使另一个div占满剩余的部分.
解法之一:如下例子(以占满整个高度为例  ):&amp;lt;div calss = &quot;ab&quot;&amp;gt;        &amp;lt;div class=&quot;a&quot;&amp;gt;div元素a&amp;lt;/div&amp;gt;        &amp;lt;div class=&quot;b&quot;&amp;gt; div元素b&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;      &amp;lt;style&amp;