变量改变时的图像交换

Question

我有一个 html 页面，其中有一个图像对象。

我正在尝试编写一些 JavaScript 但脚本中的某些内容不起作用。我有一段读取变量的脚本，如果变量 'e' 等于 1，则会出现一个图像。如果 'e' 是任何其他数字，则会出现图像 2。目前，'e' 是静态的，但它将是动态的。

如何根据变量动态更改图像？

非常感谢任何帮助。

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Title of the document</title>
   <body onload="changei()">
      <img id="im1" src="Images/lion1.jpg" width="100" height="180" style="display:show"> 
      <p> hello</p>
      <script>
         function changei() {
         var e = 0;
         changei(e);
         // something  changed e in e = 0;
         change(e);

         function changei(e) {
         var loc = '';
         if (image.src.match("lion1")) {
         image.src = "Images/lion1.jpg";
         } else {
         image.src = "Images/lion2.jpg";
         }
         $('#im1').attr("src",loc); // change image source
         }

      </script>
   </body>
</html>

Answer 1

你可以做两件事：

您将在某些函数中更改变量 e 的值，然后只需创建一个函数来更改图像并调用它，如下所示。
```
function changeImg(e){
if(e==1)
    //your code for image 1
else
   //code for image 2
}
```

更改 e 后立即调用此函数。

使用setInterval()函数。例如

setInterval(5000,function(){
changeImg(e);
});

尽管如此，您应该记住，对于案例 2

，您需要将 e 设为全局

Answer 2

您可以使用jQuery更改图片来源。您的函数内部有 e，将其作为参数传递并且您可以通过使用相应的值调用函数来更改所需的图像。

var e = 1;
changei(e);
// something  changed e in e = 0;
changei(e);

function changei(e) {
  var loc = '';
  if (e==1) {
       loc = "Images/lion1.jpg";
  } else {
       loc = "Images/lion2.jpg";
  }
  $('#im1').attr("src",loc); // change image source
}

示例： 您可以将事件附加到输入，keyup 并且每次您按下其中的一个键时 input 图像将根据根据您输入的内容。

changei(1); // when entering in page set src

$('#eInput').keyup(function(){ // when something was inserted on input
    var e = $(this).val();
    changei(e);
});

function changei(e) {
  var loc = '';
  if (e==1) {
       loc = "http://images.math.cnrs.fr/local/cache-vignettes/L256xH256/section1-original-0f409.png";
  } else {
       loc = "http://www.data-compression.com/baboon_24bpp.gif";
  }
  $('#im1').attr("src",loc); // change image source
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="eInput" />
<img id="im1" src="Images/lion1.jpg" style="display:show">

变量改变时的图像交换

Image swapping when a variable changes

html

javascript

jquery

javascript-events