我想使用 javascript 动态加载图像

Question

var only_chapter = [["19", "2191141"], ["18", "1918042"], ["17", "1189512"], ["16", "950194"], ["15", "408357"], ["14", "58087"], ["13", "58091"], ["12", "58096"], ["11", "58103"], ["10", "58109"], ["9", "58116"], ["8", "58121"], ["7", "58128"], ["6", "58134"], ["5", "58140"], ["4", "58147"], ["3", "58153"], ["2", "58159"], ["1", "58164"]];
var chapter = 2191141;
var img_list = ["https:\/\/example.com\/upload\/zxcvbn.jpg", "https:\/\/example.com\/upload\/qwerty.jpg"];

如果有这样的Javascript

我想像这样添加 only_chapter

<select class="chapter_selector">
  <option value="2191141" selected="">19</option>
  <option value="1918042">18</option>
</select>

并且应显示与 var chapter 相同的一个选项值。

和 img_list 应该像这样放置

<div class="imgs">
  <img src="https://example.com/upload/zxcvbn.jpg">
  <img src="https://example.com/upload/qwerty.jpg">
</div>

我怎样才能为此制作脚本？

Answer 1

我不确定你在问什么，但我认为你想从你的图像列表中构建一些 HTML ？

就像是：

  var htmlContent = '';
  for (let i = 0; i < img_list.length; i ++) {
    htmlContent += '<img src="https://example.com/upload/"'+img_list[i]+'">'
  }

然后可以将此 htmlContent 添加到htmlContent中的 div 中。

不带 jQuery..

var divImageContainer = document.getElementsByClassName("imgs");
divImageContainer[0].innerHTML = htmlContent;

我没有测试过这个，我可能误解了你的问题。

Answer 2

 var only_chapter = [["19","2191141"],["18","1918042"],["17","1189512"],["16","950194"],["15","408357"],["14","58087"],["13","58091"],["12","58096"],["11","58103"],["10","58109"],["9","58116"],["8","58121"],["7","58128"],["6","58134"],["5","58140"],["4","58147"],["3","58153"],["2","58159"],["1","58164"]]; var chapter = 2191141; var img_list = ["https:\/\/example.com\/upload\/zxcvbn.jpg","https:\/\/example.com\/upload\/qwerty.jpg"]; function createSelect(array, chapter){ var selectList = document.createElement("select"); document.body.appendChild(selectList); for (var i = 0; i < array.length; i++) { var option = document.createElement("option"); option.value = array[i][0]; if(array[i][1] == chapter) option.setAttribute("selected", true); option.text = array[i][1]; selectList.appendChild(option); } } function createIMG(Src){ var imgElem = document.createElement("img"); imgElem.setAttribute('src', Src); document.getElementsByClassName("imgs")[0].appendChild(imgElem); } createSelect(only_chapter, chapter); img_list.forEach(Src => createIMG(Src))

 <div class="imgs"> </div>

Answer 3

像这样的东西：

 var b = true; function change() { if (b) { var img = document.getElementById("myimage"); img.src = 'https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_205x58_frontpage_2x.png'; b = false; } else { var img = document.getElementById("myimage"); img.src = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'; b = true; } }

 <div class="imgs"> <img id="myimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> <button onclick="change()">change</button> </div>

Answer 4

 var only_chapter = [ ["19", "2191141"], ["18", "1918042"], ["17", "1189512"], ["16", "950194"], ["15", "408357"], ["14", "58087"], ["13", "58091"], ["12", "58096"], ["11", "58103"], ["10", "58109"], ["9", "58116"], ["8", "58121"], ["7", "58128"], ["6", "58134"], ["5", "58140"], ["4", "58147"], ["3", "58153"], ["2", "58159"], ["1", "58164"] ]; var chapter = 58153; var img_list = [ "https://example.com/upload/zxcvbn.jpg", "https://example.com/upload/qwerty.jpg" ]; var selectDivHtml = ""; only_chapter.forEach(element => { selectDivHtml += element[1] == chapter? '<option value="' + element[1] + '" selected >' + element[0] + "</option>": '<option value="' + element[1] + '" >' + element[0] + "</option>"; }); const selectDiv = document.getElementById("chapter_ddl"); selectDiv.innerHTML = selectDivHtml; var imageDivHtml = ""; img_list.forEach(element => { imageDivHtml += '<img src="' + element + '">'; }); const imageDiv = document.getElementById("imgs"); imageDiv.innerHTML = imageDivHtml;

 <select id="chapter_ddl" class="chapter_selector"></select> <div class="imgs" id="imgs"></div>

Answer 5

您可以遍历 arrays 并以所需格式连接值，设置 Div 的 innerHTML，如下所示，

document.getElementById("imgs").innerHTML = <concatinatedString>;