Javascript - 使用变量更改图像答案

【问题标题】：Javascript - Changing an image with variablesJavascript - 使用变量更改图像
【发布时间】：2013-11-18 06:20:41
【问题描述】：

我正在尝试创建幻灯片，但遇到了一些困难。我已经用谷歌搜索了这个问题并阅读了大量页面，但我仍然无法让它工作。我在我的标题中做这一切，然后 header.php 将包含在任何页面上。我尝试将源设置为包含该位置的字符串，在之前创建图像，然后将其设置为该图像的源，然后尝试一些奇怪的事情来让它工作。

奇怪的是，当我调用 updateSlider() 函数时，我的图像的来源为空，即使我可以在屏幕上看到它，然后当我设置它时，它说有来源但图像是相同。

但目前我只是想在单击按钮时更改图像，然后我将尝试制作幻灯片。这是 header.php 代码，你可以看到我在其中尝试过的一些不同的东西：

<!DOCTYPE html>
<html>

   <head>
      <style type="text/css" media="all">@import "./includes/layout.css";</style>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">          
      </script>

      <script>
         var slideImages = new Array("includes/images/mmSlideImage1.png",    
            "includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");

        var slideImage = newImage();
        slideImage.src = slideImages[0];

        pic = document.createElement("img");
        pic.setAttribute("src", "includes/images/mmSlideImage2.png");
        pic.setAttribute("alt", "No Image");

        var url2 = "includes/images/mmSlideImage2.png";
        var img2 = new Image();
        img2.src = url2;

        function updateSlider() {
            console.log(document.getElementById("ht").getAttribute("src"));
            document.getElementById("ht").setAttribute("src", img2.src);
            console.log(document.getElementById("ht").getAttribute("src"));
        }
    </script>

</head>
    <body>
        <a href="index.html" class="logo" id="ht"> <img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" /></a>

        <button type="button" onclick="updateSlider()">Update Slider</button>

        <div id="nav">
            <a href=index.php class="navBarLink">Home</a>
            <a href=about.php class="navBarLink">About</a>
            <a href=gallery.php class="navBarLink">Gallery</a>   
            <a href=programs.php class="navBarLink">Programs</a>    
        </div>

提前感谢您的帮助！

================================================ ====================================

更新代码：

<!DOCTYPE html>
<html>

   <head>
      <style type="text/css" media="all">@import "./includes/layout.css";</style>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
      </script>

      <script>
         var url2 = "includes/images/mmSlideImage2.png";

         function updateSlider()  {
             console.log(document.getElementById("ht").getAttribute("src"));
             $('ht').attr('src', url2);
             console.log(document.getElementById("ht").getAttribute("src"));
         }
      </script>

   </head>
   <body>
        <a href="index.html" class="logo" id="ht"> <img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" /></a>

        <button type="button" onclick="updateSlider()">Update Slider</button>

【问题讨论】：

在您更新的代码中...您缺少 jQuery 的 script 标记的结束符号。

标签： javascript html image variables

【解决方案1】：

简单。您正在尝试为锚点提供图像属性。给你的 img 一个 id 并在 Javascript 中修复它。例如，如果你给它一个“currentSlideImage”id:

$('#currentSlideImage').attr('src', url2);

顺便说一句，我建议你阅读Unobstrusive Javascript。

【讨论】：

【解决方案2】：

我不知道为什么你只是在更改图像标签的 src 时使用新图像。

最简单的方法是使用jquery代码

$('#imgTagID').attr('src', url2);

或在javascript中

document.getElementById("imgTagID").src = url2;

【讨论】：

我刚刚尝试了您推荐的两个示例，但仍然无法正常工作。我拥有的控制台输出也两次都返回 null 。我删除了一些代码以使其更简单，并用您的一项建议更新了我的帖子，以展示我所做的。
试试上面的例子，我几分钟前说过它在我这边工作正常

【解决方案3】：

你去吧，你只是在 jquery 中缺少 id 标签，我只是用在线图片尝试过

<!DOCTYPE html>
<html>

<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";

function updateSlider()  {
    //console.log(document.getElementById("ht").getAttribute("src"));
    $('#ht').attr('src', url2);
    //console.log(document.getElementById("ht").getAttribute("src"));
}
</script>

</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>

<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

【讨论】：