html5的一点写法求助,好像要用js写的吧

例如
<ul >
<li id="mk1";><a href="mm33.html" target="_blank"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="gh4.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="gh3.jpg" width="250" height="300" alt=""></a></li>
<li id="mk1";><a href="#"><img src="1F.jpg" width="250" height="300" alt=""></a></li>
</ul>

几个还好,要是有几百个,而且还有好几种类型,这样写在HTML里,不便阅读,有没有好办法写在一个文件里加载进来,这样HTML看起来也很简洁,谢谢
别人说在js中用循环加载进来,可是我不会,还有更好的方法吗

用js循环加载是最佳的办法,如果你不懂,没关系,我写个demo,你跟着学,就算看不会,直接在对象上面填数据即可。

首先我们为了便于筛选给ul加个id ul1 这个实际使用中你根据自身要求重命名即可

<ul id="ul1"></ul>

然后我们提取一下需要的变量用来组织数据对象,可以看到li标签里面有id【你id都是mk1,这在实际使用中是不科学的,id应该具有唯一性】,li下面的a标签有href,target。li下面的ims有src。把第一个li的这些属性提取出来,我们得到下面的对象

   var data = {
        id: 'mk1',
        href: 'mm33.html',
        target: '_blank',
        src: '1F.jpg'
    }

请记住,这样一个对象针对的是一条li,你有N多条,需要一个数组对象,

   var dataArr = [
        {id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
        {id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
        {id: 'mk3', href: '#', target: '', src: '1F.jpg'}
    ];

这里我的测试数据只帮你写3条,你实际使用中按这个格式扩展即可。

有了对象,然后写js,请把下面这段代码复制到ul1之后

<script>
    var dataArr = [
        {id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
        {id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
        {id: 'mk3', href: '#', target: '', src: '1F.jpg'}
    ];

    var html = "";
    for(var i = 0 ; i < dataArr.length ; i++){
        html += '<li id="'+ dataArr[i].id +'"><a href="'+ dataArr[i].href +'" target="'+ dataArr[i].target +'"><img src="'+ dataArr[i].src +'" width="250" height="300" alt=""></a></li>';
    }

    var ul = document.getElementById("ul1"); //此处ul1是ul的ID,如果ID改了这里要跟着改
    ul.innerHTML = html;
</script>

打开运行,可以发现  ul下面已经根据dataArr里面的对象生成相应数量的li,并赋予属性了

追问

我这样为啥输出什么都没有,错哪儿了

追答

你代码中多了一层标签,肯定解析不了的,去掉 只留一层

追问

已经修改了,还是没有啊

追答

你这图上面有2个啊 。。。。

追问

这下没错吧,也是什么都没有。我要哭了

追答<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="ul1"></ul>
</body>
<script>
    var dataArr = [
        {id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
        {id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
        {id: 'mk3', href: '#', target: '', src: '1F.jpg'}
    ];

    var html = "";
    for(var i = 0 ; i < dataArr.length ; i++){
        html += '<li id="'+ dataArr[i].id +'"><a href="'+ dataArr[i].href +'" target="'+ dataArr[i].target +'"><img src="'+ dataArr[i].src +'" width="250" height="300" alt=""></a></li>';
    }

    var ul = document.getElementById("ul1"); //此处ul1是ul的ID,如果ID改了这里要跟着改
    ul.innerHTML = html;
</script>
</html>

直接把页面代码改成这样,看看能不能执行后是否有效果

追问

现在有了,真心谢谢你。刚才为什么不行啊

追答

你图截的不全,没办法判断,没效果的时候打开浏览器的开发者工具,都有错误定位的

追问

把分给你,谢谢你,睡觉啦

温馨提示:答案为网友推荐,仅供参考
第1个回答  2017-02-22
循环是最好的解决办法,你不会,那就自己学习,看看循环怎么实现

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网