显示和隐藏动态生成的ID's使用javascript
Showing and hiding dynamically generated ID's with javascript
下面的代码使用dynamically generated id's
显示和隐藏div内容,就像div_1, div_2
从div id
显示和隐藏一样,除了它需要一次隐藏一个div内容,比如点击div_1应该打开它的内容,点击div_2应该隐藏div_1之外,一切似乎都很好。请帮我解决这个问题。
echo "<span class='bold'><a name='form_a_$group_seq' href='#div_$group_seq' id='form_a_$group_seq' value='1' " .
"onclick='return divclick(this,'"div_$group_seq'");'";
if ($display_style == 'block') echo "clicked";
echo "<b>" . xl_layout_label($group_name) . "</b></a></span>'n";
echo "<div id='div_$group_seq' class='section' style='display:$display_style;'>'n";
echo " <table border='0' cellpadding='0'>'n";
$display_style = 'none';
}
else if (strlen($last_group) == 0) {
echo " <table border='0' cellpadding='0'>'n";
}
下面是使代码可用的javascript。但是它一次显示或隐藏所有div内容。
function divclick(a, divid) {
var divstyle = document.getElementById(divid).style;
if ( divstyle.display == 'none' ) {
divstyle.display = 'block';
} else {
divstyle.display = 'none';
}
return true;
}
这是一段更新的html代码,它就是浏览器正在呈现的内容。
<div class='container2'><ul class='taby'><li class='dropown'><a name='form_a_1' href='#div_1' id='form_a_1' value='1' onclick='return divclick(this,"div_1");'>Who</a></li></ul>
<div id='div_1' class='section'>
<table border='0' cellpadding='0'>
<div id='div_2' class='section'>
<table border='0' cellpadding='0'>
<div id='div_3' class='section'>
<table border='0' cellpadding='0'>
这真的太乱了,无法处理和理解。您应该考虑清理动态呈现html的方式,这会使遇到此类问题时更容易解决。或者一起阻止它们。
<span class='bold' style='background:#0DCAD1'>
<a name="<?php echo "form_a_$group_seq";?>" href="<?php echo "#div_$group_seq";?>" id="<?php echo "form_a_$group_seq";?>" value='1'>
等等。。。。
如果你在echo字符串中渲染所有的html,你会发现以后很难处理。尤其是当你在处理大量渲染的应用程序时。
如果您在页面中使用jquery,您可以在代码中添加一行
function divclick(a, divid) {
var divstyle = document.getElementById(divid).style;
if ( divstyle.display == 'none' ) {
$(".section").css('display', 'none');
divstyle.display = 'block';
} else {
divstyle.display = 'none';
}
return true;
}
如果您不在页面上使用jquery,它会变得稍微复杂一些,但只需添加几行即可完成。
function divclick(a, divid) {
var divstyle = document.getElementById(divid).style;
if ( divstyle.display == 'none' ) {
var sections = document.getElementsByClassName('section');
Array.prototype.forEach.call(sections, function(section){
section.style.display = 'none';
});
divstyle.display = 'block';
} else {
divstyle.display = 'none';
}
return true;
}
相关文章:
- Javascript:使用绝对路径设置img src
- Javascript使用变量设置属性
- 使用Javascript使用数组检查文本框中的值
- Javascript:使用document.write时删除子项
- Javascript 使用 document.write 编写 innerHtml 的值
- JavaScript使用字符串Reveal Triangles
- Javascript:使用用户输入搜索数组
- 使用javascript使用for循环声明变量
- 如何使用Javascript使用给定的输入创建输出表
- Javascript-使用“”将toDateStringMonth从文本字符串解析为数字字符串;如果“;vs“;开关”;
- Javascript使用+添加对象
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- Javascript使用Confirm取消表单提交
- javascript使用正则表达式得到错误的结果
- 对javascript使用.html中的select id
- JavaScript-使用B.prototype=new A()继承数组
- Javascript:使用一个预先存在的对象值作为一个新对象的键
- Javascript使用本地存储,回调对象并用Json更改为一个字符串以用于填充函数
- Javascript使用JCanvaScript在画布中加载图像
- 模型中的Javascript使用列表