HTML文档的计算问题

OKJSJSF

zpy2 发表于 2024-7-27 18:05
如果代码规模不大，又是一次性的，咋办都行

老师好！学生还在弄通讯录。准备做三种样式，以前文档结构图是第一种样式，样式二是菜单在页面上部的，兄弟元素同时显示的，样式三是采用组合框也就是多级下拉列表那种样子，也放在页面顶端，不展开，只占一行空间，随点击从左往右依次展开，第二行开始是全部姓名电话。
今天在练父元素监听器，想把重复语句换成循环语句，没成功。一级父元素三个设三个ID，二级父元素21个设21个ID，三级父元素60个设60个ID，第四级为最后，约600个人的姓名电话，设约600个ID。
<script>
let li=document.getElementById('zero');
li.addEventListener('click',(event) =>{
let target=event.target;
switch(target.id){
case "one1":alert(target.innerText);break;
case "one2":alert(target.innerText);break;
case "one3":alert(target.innerText);break;
case "two1":alert(target.innerText);break;
...
case "two21":alert(target.innerText);break;
case "three1":alert(target.innerText);break;
...

case "three60":alert(target.innerText);break;
case "four1":alert(target.innerText);break;
...
case "four600":alert(target.innerText);break;
}
})
</script>
当把四类元素设为四个数组，改为四个循环语句时没成功。switch(target.id){for(，，){  ； ；}for(，，){  ； ；}for(，，){  ； ；}for(，，){  ； ；}}

OKJSJSF

var arr=["one1","one2","one3"];
for(var i=0;i<arr.length;i++){"case '" + arr + "':" + alert(target.innerText);break;}
一级标题三个ID，点击任一个时，弹窗显示标题文本，不成功。

OKJSJSF

var arr=["one1","one2","one3"];
if(target.id in arr){alert(target.innerText);break;}
也不行

OKJSJSF

var arr=["one1","one2","one3"];
for(var i=0;i<arr.length;i++){if(arr[i] == target.id){alert(target.innerText);break;};}
也不行

OKJSJSF

<script>
let li=document.getElementById('zero');
li.addEventListener('click',(event) =>{
let target=event.target;
switch(target.id){
var arr=["one1","one2","one3"];
var id=target.id
if(id in arr){alert(target.innerText);break;}

case "two1":alert(target.innerText);break;
...
case "two21":alert(target.innerText);break;
case "three1":alert(target.innerText);break;
...

case "three60":alert(target.innerText);break;
case "four1":alert(target.innerText);break;
...
case "four600":alert(target.innerText);break;
}
})
</script>
还是不行

yangqianming

OKJSJSF 发表于 2024-9-13 13:03
三级节点的通讯录已完成，类似WORD的文档结构图，感觉很好用，在手机上，网页文件解决了手机对excel支持 ...

希望越做越好！

OKJSJSF

yangqianming 发表于 2024-10-11 14:34
希望越做越好！

折腾中,进展缓慢.

OKJSJSF

终于完成，代码简化如下。
<script>
const li=document.getElementById('zero');
li.addEventListener('click',function(event){
const target=event.target;
if(target.matches('summary')||target.matches('li')){
alert(target.innerText);}
})
</script>
innerText可以换成textContent。这样，当点击首个父元素下的所有标签为summary的元素（菜单的折叠/展开开关）或标签为li的元素（最末级子元素，既具体内容，比如每一行电话信息）时，可以获取其文本。

OKJSJSF

下面这样也行。
<script>
const li=document.getElementById('zero');
li.addEventListener('click',myf,false);
function myf(event){
const target=event.target;
if(target.matches('summary')||target.matches('li')){alert(target.innerText);}
}
</script>

OKJSJSF

百度的AI智能回答真不错：target.matches('标签')