Question

HTML：

<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content="HTML, CSS"/>
    <link href= "Task1.1.css" rel="stylesheet"/>  
    <title> Task 1.1 HTML and CSS Demo Page</title>
    <script src="Task1.2.js"></script>
</head>

<body>
    <header>
        <h1>Title of Article about Interesting Visualisation</h1>
    </header>
    <h2>Author of Interesting Article</h2>
    <p>The NAPLAN is a test that measures students’ <b>knowledge, skills, and abilities</b> over an extended amount of time. Instead, It examines students’ general understanding and advancement in literacy and numeracy rather than focusing on a specific subject. Studying NAPLAN <i>past papers</i> is one of the ways that you can ensure your child’s preparation for the NAPLAN.</p>
    <ol>
        <li>Knowledge</li>
        <li>Skills</li>
        <li>Abilities</li>
    </ol>
    <button type="submit" id="btn1" onclick="changeImage('2011')">2011</button>
    <button type="submit" id="btn2" onclick="changeImage('2017')">2017</button>
    <figure>
        <img id="2011" src="images/NT_Naplan_Reading_Results_2011.png" alt="Naplan Results"/> 
            <figcaption>Fig 1. Percent of children above national minimum standard in reading in 2011 for Year 3, 5, 7 and 9 for Non-Indiginous and Indiginous children in the Nothern Teritory. Data Source: <a href="">NAPLANresults</a></figcaption>
    </figure>

    <figure>
    <img id="2017" src="images/NT_Naplan_Reading_Results_2017.png" alt="Naplan Results"/>
        <figcaption>Fig 2. Percent of children above national minimum standard in reading in 2017 for Year 3, 5, 7 and 9 for Non-Indiginous and Indiginous children in the Nothern Teritory. Data Source: <a href="">NAPLANresults</a></figcaption>
    </figure>
    <p>The overall NAPLAN recipe for success is that the more I practiced for my Naplan testing and experienced success, the more confident I felt. It really helped on the day as I went into the test more relaxed and with a clear head space.</p>

<footer>
    <p><b>COS30045 Data Visualiastion</b></p>
    <p><b>27th February 2018</b></p>
</footer>
</body>
</html>

JS：

function changeImage(imgid)
{
    if(imgid=='2011')
    {
        document.getElementById(imgid).src="images/NT_Naplan_Reading_Results_2017.png";
    }
    else if(imgid=='2017')
    {
        document.getElementById(imgid).src="images/NT_Naplan_Reading_Results_2011.png";
    }
}

这是我的代码到目前为止，一切正常，但我无法弄清楚如何让我的图像改变。目前我有2个图像，我可以让它们改变到另一个，但我想要一个图像，它将改变为我在单击按钮时选择的任何一个图像。我该如何解决这个问题？

Answer 1

只需保留一张id的图像，然后根据您的参数更改图像的src，如下所示。我添加了图片id广告testimg并引用此图片来切换图片。

<button type="submit" id="btn1" onclick="changeImage('2011')">2011</button>
<button type="submit" id="btn2" onclick="changeImage('2017')">2017</button>
<figure>
    <img id="testimg" src="images/NT_Naplan_Reading_Results_2011.png" alt="Naplan Results"/> 
    <figcaption>Fig 1. Percent of children above national minimum standard in reading in 2011 for Year 3, 5, 7 and 9 for Non-Indiginous and Indiginous children in the Nothern Teritory. Data Source: <a href="">NAPLANresults</a></figcaption>
</figure>

<强> JS

function changeImage(imgid)
{
   if(imgid=='2011') { document.getElementById("testimg").src="images/NT_Naplan_Reading_Results_2011.png";
   }
   else if(imgid=='2017') { document.getElementById("testimg").src="images/NT_Naplan_Reading_Results_2017.png";
   }
}

Answer 2

你的意思是？

    function changeImage(imgid)
{
    var x = document.getElementById("1");
    var y = document.getElementById("2");
    
    if (imgid=='2011') {
        x.style.display = "block";
        y.style.display = "none";
    } else {
        y.style.display = "block";
        x.style.display = "none";
    }
}

<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content="HTML, CSS"/>
    <link href= "Task1.1.css" rel="stylesheet"/>  
    <title> Task 1.1 HTML and CSS Demo Page</title>
    <script src="Task1.2.js"></script>
</head>

<body onload="changeImage('2011')">
    <header>
        <h1>Title of Article about Interesting Visualisation</h1>
    </header>
    <h2>Author of Interesting Article</h2>
    <p>The NAPLAN is a test that measures students’ <b>knowledge, skills, and abilities</b> over an extended amount of time. Instead, It examines students’ general understanding and advancement in literacy and numeracy rather than focusing on a specific subject. Studying NAPLAN <i>past papers</i> is one of the ways that you can ensure your child’s preparation for the NAPLAN.</p>
    <ol>
        <li>Knowledge</li>
        <li>Skills</li>
        <li>Abilities</li>
    </ol>
    <button type="submit" id="btn1" onclick="changeImage('2011')">2011</button>
    <button type="submit" id="btn2" onclick="changeImage('2017')">2017</button>
    <figure id="1">
        <img id="2011" src="https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg" alt="Naplan Results"/> 
            <figcaption>Fig 1. Percent of children above national minimum standard in reading in 2011 for Year 3, 5, 7 and 9 for Non-Indiginous and Indiginous children in the Nothern Teritory. Data Source: <a href="">NAPLANresults</a></figcaption>
    </figure>

    <figure id="2">
    <img id="2017" src="https://media.istockphoto.com/photos/sunrise-on-yosemite-valley-picture-id505872990?k=6&m=505872990&s=612x612&w=0&h=XcdHhkC9PF9-saYT6n_GQD-0Hf8dbI_Q4wfYlZZGpNk=" alt="Naplan Results"/>
        <figcaption>Fig 2. Percent of children above national minimum standard in reading in 2017 for Year 3, 5, 7 and 9 for Non-Indiginous and Indiginous children in the Nothern Teritory. Data Source: <a href="">NAPLANresults</a></figcaption>
    </figure>
    <p>The overall NAPLAN recipe for success is that the more I practiced for my Naplan testing and experienced success, the more confident I felt. It really helped on the day as I went into the test more relaxed and with a clear head space.</p>

<footer>
    <p><b>COS30045 Data Visualiastion</b></p>
    <p><b>27th February 2018</b></p>
</footer>
</body>
</html>

使用按钮在2张图像之间切换

2 个答案: