它的JS与HTML标签是分离的吗

最新推荐文章于 2021-07-01 10:52:19 发布

转载最新推荐文章于 2021-07-01 10:52:19 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010188316

本文介绍两种使用JavaScript实现图片切换的方法。第一种直接在HTML中添加事件处理程序，第二种则采用事件监听器，使得代码与HTML结构更易于维护。通过这两种方式，读者可以了解如何灵活运用JavaScript来控制页面上的图片显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个单的利用JS切换图片的功能
图片描述
写法1：

  <section>
      <h2>JS切换图片</h2>
      <ul class="pictable">
        <li><a href="img/1.jpg" onclick="showPic(this);return false" title="this picture is beautiful"><img class="picbox" src="img/1.jpg" alt=""></a></li>
        <li><a href="img/2.jpg" onclick="showPic(this);return false" title="this picture is beautiful"><img class="picbox" src="img/2.jpg" alt=""></a></li>
        <li><a href="img/3.jpg" onclick="showPic(this);return false" title="this picture is beautiful"><img class="picbox" src="img/3.jpg" alt=""></a></li>
        <li><a href="img/4.jpg" onclick="showPic(this);return false" title="this picture is beautiful"><img class="picbox" src="img/4.jpg" alt=""></a></li>
    </ul>
    <p id="pic_description">图片描述</p>
    <img src="https://b-ssl.duitang.com/uploads/item/201408/04/20140804204624_xSeGA.png" id="placeholder" alt="img fult">
    </section>
    
      function showPic(whichpic){
      //改变图片
    var source =  whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    //改变图片描述
    function showPic_description(){
      var text=whichpic.getAttribute("title");
      var pic_desciption=document.getElementById("pic_desciption");
      pic_desciption.childNodes[0].nodeValue=text;
    };
  };

写法2：

<section>
      <h2>JS切换图片</h2>
      <ul class="pictable" id="img_gallert">
        <li><a href="img/1.jpg"  title="this picture is beautiful"><img class="picbox" src="img/1.jpg" alt=""></a></li>
        <li><a href="img/2.jpg"  title="this picture is beautiful"><img class="picbox" src="img/2.jpg" alt=""></a></li>
        <li><a href="img/3.jpg"  title="this picture is beautiful"><img class="picbox" src="img/3.jpg" alt=""></a></li>
        <li><a href="img/4.jpg"  title="this picture is beautiful"><img class="picbox" src="img/4.jpg" alt=""></a></li>
    </ul>
    <p id="pic_description">图片描述</p>
    <img src="https://b-ssl.duitang.com/uploads/item/201408/04/20140804204624_xSeGA.png" id="placeholder" alt="img fult">
    </section>
    
    window.onload=prepareGallery;
function prepareGallery(){
  //找到图片集
  var gallery=document.getElementById("img_gallert");
  // 图片集的a元素节点
  var link=gallery.getElementsByTagName("a");
  // 遍历节点
  for(var i=0;i<link.length;i++){
    link[i].onclick=function(){
        showPic(this);
        return false;
    }
  }
};
function showPic(whichpic){
    //改变图片
  var source =  whichpic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
};

虽然功能都一样，但是写法2却更好JS不会因为HTML里的代码改变了，就导致无法执行。
好的JS应该与HTML标签是分离的。后期维护更加方便