Javascript随时随地更改图片 [英] Javascript Change picture on the go

问题描述

更新问题：

@Mouser，谢谢您的回答。尽管我确定代码是正确的，但实际上没有任何作用。我相信这是因为我在主体部分中的元素之后立即运行了脚本。因此，创建了列表，然后运行了代码并更改了listimgx的源，但是如何使它真正显示命名的src？在当前状态下，页面加载，文本项更改，但图片未更改。我尝试在ul的末尾添加一个类，并在脚本末尾添加一个listview刷新，但这没有用。

Updating the Question:
@Mouser, thank you for this answer. though I'm sure the code is fine, it actually doesn't do anything. I believe it is because I run the script right after the elements in the body section. So, the list is created, and then the code is run and the source of the listimgx changes, but how can I make it actually show the named src? At its current state, page loads, text items change, but the pictures don't. I tried adding a class to ul and adding a listview refresh at the end of my script, but it didn't work.

原始问题：

好​​的，下面的代码应该检查二维数组值，并且如果它包含字符串 fi ，则应将第i个listimg.source更改为write.png。

换句话说，当前img源设置为 mcicon.jpg。假设urlArray [4] [1]包含 fi；现在我希望listimg4.src是 write.png。我正在为此尝试一个for循环，但到目前为止还没有成功。我都尝试了以下两个方法，但均未成功：

imgname.concat（i）.src = write.png

currentname.src = write.png

Original Question:
Ok, the following code is supposed to check a 2-dimensional-array value, and if it contains the string "fi", then it should change the i.th listimg.source to write.png.
In other words, the current img source is set to "mcicon.jpg". let's say, urlArray[4][1] contains "fi"; now I want listimg4.src to be "write.png". I'm trying a for loop for this, but it didn't work so far.I tried both these without success:
imgname.concat(i).src="write.png"
currentname.src="write.png"

//some items in my list:
<li>
<a href="#" onclick="datasent(1);"><img src="mcicon.png" id="listimg0" alt="Gummy Bears" /><span class="ui-li-count">12</span>
<h2 id="testname0"> Test Name 0</h2>
<p id="testexp0">Test Explanation 0</p>
</a>
</li>

<li>
<a href="#dog" onclick="datasent(2);"><img src="mcicon.png" id="listimg1" alt "Min Pin" />
<h1 id="testname1">Test Name 1</h1>
<p id="testexp1">Test Explanation 1</p>
</a> 
</li>
<li>
<a href="#gummies" onclick="datasent(3);"><img src="mcicon.png" id="listimg2" alt="Gummy Bears" />
<h1 id="testname2"> Test Name 2 </h1>
<p id="testexp2">Test Explanation 2</p>
</a>
</li>

//and my javascript code:
<script>
var urlArray = [[1, "mc", "To Be Present", "Choose the correct answer.", 10, 0, 0],[2, "fi", "To Be Present", "Fill in the blanks using To Be Present.", 10, 0, 0]]

//those work:
document.getElementById("testname1").innerHTML = urlArray[1][2];
document.getElementById("testexp1").innerHTML = urlArray[1][3];

//this one does not work! the icon doesn't change!

for (var i=0; i<urlArray.length; i++) {
var imgname = "listimg";
if (urlArray[i][1]==="fi"){
  var currentname = imgname.concat(i);
  if(document.getElementById(currentname) ) //check if element exists
  {
     document.getElementById(currentname).src= "write.png";
     //for debugging; delete from production code.
     console.log(document.getElementById(currentname).src); //should write "write.png" to console.
  }
}
}

推荐答案

此代码将不起作用。您要在字符串上请求src属性。那不是图像元素。 document.getElementById（ testname1）也许。因此，将该元素的 src 设置为 currentname 。

This code will not work. You're requesting the src property on a string. That isn't an image element. document.getElementById("testname1") maybe. So set the src of that element to currentname.

urlArray = [[0, "si"], [1, "wi"], [2, "fi"]];

for (var i=0; i<urlArray.length; i++) {
    var imgname = "listimg";
    if (urlArray[i][1]==="fi"){
      var currentname = imgname.concat(i);
      if(document.getElementById(currentname) ) //check if element exists
      {
         document.getElementById(currentname).src= "write.png";
         //for debugging; delete from production code.
         console.log(document.getElementById(currentname).src); //should write "write.png" to console.
      }
    }
}

<img src="" id="listimg2" />

这篇关于Javascript随时随地更改图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！