javascript显示隐藏层比较不错的方法分析
JavaScript方法 分析 显示 比较 隐藏 不错
2023-06-13 09:14:02 时间
这是一个Q&A的页面,设计师希望能够点击相关的问题后,在它下方显示对应的答案。这是一个比较常见功能,通常的解决办法是把“答案”当作整个问题容器的子元素,然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。
但是当初写html的时候并没有考虑到脚本编写(需求是后加的),所以,答案和标题没有父子关系可以对应。html代码如下。
所以,这里需要用到另一种方法来匹配答案和标题。我们可以通过捕捉元素的位置来匹配它们。也就是说第一条标题,对应的肯定是整个序列中的第一条答案,第二条标题对应的肯定是第二条答案。这样就可以无视html结构来控制它们的对应关系了。
复制代码代码如下:
但是当初写html的时候并没有考虑到脚本编写(需求是后加的),所以,答案和标题没有父子关系可以对应。html代码如下。
所以,这里需要用到另一种方法来匹配答案和标题。我们可以通过捕捉元素的位置来匹配它们。也就是说第一条标题,对应的肯定是整个序列中的第一条答案,第二条标题对应的肯定是第二条答案。这样就可以无视html结构来控制它们的对应关系了。
<ulclass="qusetionList">
<liclass="liHeader"><spanclass="colABC-A">??</span><spanclass="colABC-B">?祟}</span><spanclass="colABC-C">??者/???者</span></li>
<liclass="liBody"><spanclass="colABC-A">1</span><spanclass="colABC-B">想要?小店需要付???</span><spanclass="colABC-C"><ahref="#"title=""class="openLink"></a>客服</span></li>
<liclass="answer"><spanclass="colABC-B">
??段於策?其所以不收取任何?用,?使用者不用??摹?lt;BR>
除了加值服?盏墓δ苣=M之外。</span><spanclass="colABC-C"><ahref="#"title=""class="closeLink"></a>客服</span></li>
<liclass="liBody"><spanclass="colABC-A">2</span><spanclass="colABC-B">想要?小店需要付???</span><spanclass="colABC-C"><ahref="#"title=""class="openLink"></a>客服</span></li>
<liclass="answer"><spanclass="colABC-B">
??段於策?其所以不收取任何?用,?使用者不用??摹?lt;BR>
除了加值服?盏墓δ苣=M之外。</span><spanclass="colABC-C"><ahref="#"title=""class="closeLink"></a>客服</span></li>
</ul>
脚本解释:当点击openLink这个图标时,显示和openLink在序列中位置相同的answer。这里需要将onclick事件放在闭包里面,等到for循环结束后才被激活。如果没有这层闭包,那不管点击哪个openLink,显示的都将是openLink.length的值。
document.getElementsByClassName=function(eleClassName)
{
vargetEleClass=[];//定义一个数组
varmyclass=newRegExp("\\b"+eleClassName+"\\b");//创建一个正则表达式对像
varelem=this.getElementsByTagName("*");//获取文档里所有的元素
for(varh=0;h<elem.length;h++)
{
varclasses=elem[h].className;//获取class对像
if(myclass.test(classes))getEleClass.push(elem[h]);//正则比较,取到想要的CLASS对像
}
returngetEleClass;//返回数组
}
//上面这是捕捉class的方法,我一直用它,复制过来就OK。
varanswer=document.getElementsByClassName("answer");
varopenLink=document.getElementsByClassName("openLink");
varcloseLink=document.getElementsByClassName("closeLink");
for(i=0;i<openLink.length;i++)
{
(
function(i){
openLink[i].onclick=function(){
varj=i;
answer[j].style.display="block"
}
closeLink[i].onclick=function(){
varj=i;
answer[j].style.display="none"
}
}
)(i);
}
相关文章
- JavaScript数组filter方法
- JavaScript 字符串方法与属性(下)
- MongoDB服务端JavaScript脚本使用方法
- javascript 过滤中文汉字和 过滤中文汉字和符号的方法详解编程语言
- javascript获取时间戳的方法详解编程语言
- 深入理解JavaScript调用MongoDB的方法(js调用mongodb)
- JavaScript的面向对象(二)
- Javascript更新JavaScript数组的uniq方法
- javascript继承实现方法
- javascript隐藏/显示指定的区域附HTML元素【legend】用法
- Javascript通过json自动生成Dom的代码
- Javascript中定义方法的另类写法(批量定义js对象的方法)
- javascript小数四舍五入多种方法实现
- javascript的offset、client、scroll使用方法详解
- javascript中节点的最近的相关节点访问方法
- 基于KMP算法JavaScript的实现方法分析
- JavaScript获取和设置CheckBox状态的简单方法
- 禁用页面部分JavaScript方法的具体实现
- javascript判断机器是否联网的2种方法
- javascript中创建对象的几种方法总结
- javascript按位非运算符的使用方法
- javascript中数组的sort()方法的使用介绍
- 让jQuery与其他JavaScript库并存避免冲突的方法
- javascript中拼接HTML字符串的最快、最好的方法
- javascript使用正则控制input输入框允许输入的值方法大全
- JavaScript中实现最高效的数组乱序方法
- javascript几个易错点记录
- 实例分析javascript中的call()和apply()方法
- javascript获取元素偏移量的方法有哪些
- javascript中声明函数的方法及调用函数的返回值
- javascript中with()方法的语法格式及使用
- 用javascript关闭本窗口不弹出询问框的方法