我想使用javascript动态加载图像

时间:2019-10-30 11:44:14

标签: javascript

String queryToBeUpdate = "UPDATE home SET currentSeq = (CASE 
                          WHEN  resId = '6hiuxhqkw4s1bta9a' THEN '2' 
                          WHEN  resId = 'hpvihvzk0vainpkgg' THEN '4' 
                          WHEN  resId = 'krfswe6wohjtugmtd' THEN '6' 
                          WHEN  resId = 'tcybuiuulkju5wjre' THEN '3' 
                          WHEN  resId = 'sgs4gr4v6aepuwdgq' THEN '7' 
                          END)
                          WHERE resId IN(6hiuxhqkw4s1bta9a,hpvihvzk0vainpkgg,krfswe6wohjtugmtd,tcybuiuulkju5wjre,sgs4gr4v6aepuwdgq) ";
 SQLQuery query = session.createSQLQuery(strq);
 query.executeUpdate(queryToBeUpdate);

如果有这样的Javascript

我想这样添加only_chapter

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"];

和与var章节相同的一个选项值应显示为选中状态。

和img_list应该这样放置

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

我如何为此编写脚本?

5 个答案:

答案 0 :(得分:0)

我不确定您要问的是什么,但是我想您想从图像列表中构建一些HTML吗?

类似:

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

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

没有jQuery ..

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

我尚未对此进行测试,可能会误解了您的问题。

答案 1 :(得分:0)

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>

答案 2 :(得分:0)

类似这样的东西:

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>

答案 3 :(得分:0)

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>

答案 4 :(得分:-1)

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

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