使用JS来动态添加相同的一段HTML代码，如下的div组合
<divid="1option"style="width:800px;height:170px;display:block"><divid="first"><divsty...
<div id="1option" style="width:800px;height:170px;display:block">
<div id="first">
<div style="width:800px;height:20px;background-color:#EDEDED;">
<div id="legend" style="float:left" ></div>
<div class="fa fa-times" id="close12" onclick="c('1option');" style="float: right;cursor:pointer;"></div>
<div class="fa fa-arrows-alt" id="d1toBig" onclick="c('seconddiv');" style="float:right;margin-right:5px" ></div>
<div class="fa fa-wikipedia-w" id="d1To7day" style="float:right;margin-right:5px;cursor:pointer"></div>
</div>
<div id="container" style="width:800px;height:150px;background-color:#FFFFFF"></div>
</div>
<div id="seconddiv" style="height:900px;width:1580px;z-index: 9999; display:none; position: fixed; left: 10px; top: 15px;background-color: #2E8B57">
<div class="fa fa-times" id="close12" onclick="c('seconddiv');" style="float: right;margin-right:40px;margin-top:7px;cursor:pointer;"></div>
<div id="newdiv1" style="width:1500px;height:700px;margin-left:40px;margin-top:30px"> </div>
</div>
</div>
js中的onclick方法是
function c(self){
$("#"+self).toggle();
} 展开
<div id="first">
<div style="width:800px;height:20px;background-color:#EDEDED;">
<div id="legend" style="float:left" ></div>
<div class="fa fa-times" id="close12" onclick="c('1option');" style="float: right;cursor:pointer;"></div>
<div class="fa fa-arrows-alt" id="d1toBig" onclick="c('seconddiv');" style="float:right;margin-right:5px" ></div>
<div class="fa fa-wikipedia-w" id="d1To7day" style="float:right;margin-right:5px;cursor:pointer"></div>
</div>
<div id="container" style="width:800px;height:150px;background-color:#FFFFFF"></div>
</div>
<div id="seconddiv" style="height:900px;width:1580px;z-index: 9999; display:none; position: fixed; left: 10px; top: 15px;background-color: #2E8B57">
<div class="fa fa-times" id="close12" onclick="c('seconddiv');" style="float: right;margin-right:40px;margin-top:7px;cursor:pointer;"></div>
<div id="newdiv1" style="width:1500px;height:700px;margin-left:40px;margin-top:30px"> </div>
</div>
</div>
js中的onclick方法是
function c(self){
$("#"+self).toggle();
} 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RunJS</title>
<script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function c(a, b) {
var ap = a.parents("#1option");
if (!b) {
ap.toggle();
} else {
ap.find(b).toggle();
}
};
$(function() {
$(":button[value='添加']").click(function() {
$("body").append($("textarea").val());
});
});
</script>
</head>
<body>
<input type="button" value="添加" />
<textarea style="display:none;">
<div id="1option" style="width:800px;height:170px;display:block">
<div id="first">
<div style="width:800px;height:20px;background-color:#EDEDED;">
<div id="legend" style="float:left">c</div>
<div class="fa fa-times" id="close12" onclick="c($(this));" style="float: right;cursor:pointer;">x</div>
<div class="fa fa-arrows-alt" id="d1toBig" onclick="c($(this),'#seconddiv');" style="float:right;margin-right:5px">s</div>
<div class="fa fa-wikipedia-w" id="d1To7day" style="float:right;margin-right:5px;cursor:pointer"></div>
</div>
<div id="container" style="width:800px;height:150px;background-color:#FFFFFF"></div>
</div>
<div id="seconddiv" style="height:900px;width:1580px;z-index: 9999; display:none; position: fixed; left: 10px; top: 15px;background-color: #2E8B57">
<div class="fa fa-times" id="close12" onclick="c($(this),'#seconddiv');" style="float: right;margin-right:40px;margin-top:7px;cursor:pointer;"></div>
<div id="newdiv1" style="width:1500px;height:700px;margin-left:40px;margin-top:30px"></div>
</div>
</div>
</textarea>
</body>
</html>
追问
怎么能让id也不一样啊，因为后面还是要用到各自的id的，比如点击那个id=close的div是要隐藏id是所传参数的div
追答
那你就不要根据id来找dom元素，把上面的改成其他选择器获取对象即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
