Установить заголовок для изображений при условии в javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть следующий код javascript для отображения изображений и их информации. Из метода getImages () я получаю два массива ответов API. Первый массив содержит URL-адреса изображений, а второй — информацию о владельце и цене. Существует только 9 ответов API, из которых я получаю URL-адрес изображения, его владельца и информацию о цене. Итак, в цикле для 9 итераций URL-адрес изображения поступает из API, а для остальных я устанавливаю некоторое изображение по умолчанию. Таким образом, для изображений по умолчанию нет информации о владельце и цене, и, следовательно, заголовок не должен отображаться для них.

 window.onload = function () {
var allImages = "";
var owner,price;
var imgurl = getImages();
var imginfo = imgurl[1];
console.log(imginfo);
for (var i = 0, j = 298; i < j; i  ) {

    if(imgurl[0][i] == undefined){imgurl[0][i]="image/upload.png"}

    if(typeof imginfo[i] === "undefined"){owner = ""; price=""; }
    else{owner = imginfo[i]["owner"]; price=imginfo[i]["price"];
    }

    allImages  = '<img class="myImg" src='  imgurl[0][i]  ' id=' i '_id onclick="openpopup(this.src)" title="owner=' owner ', price=' price '">';

}

$('#photos').append(allImages);

};
  

Может кто-нибудь дать мне какую-нибудь идею в коде? Как задать условие для установки заголовка изображения. Если ответ не определен, установите заголовок пустым.

Ответ №1:

Просто добавьте атрибут title в свою часть else и удалите его из <img> тега.

 window.onload = function() {
  var allImages = "";
  var owner, price;
  var imgurl = getImages();
  var imginfo = imgurl[1];
  console.log(imginfo);
  for (var i = 0, j = 298; i < j; i  ) {

    if (imgurl[0][i] == undefined) {
      imgurl[0][i] = "image/upload.png"
    }

    if (typeof imginfo[i] === "undefined") {
      owner = "";
    } else {
      owner = 'title="owner='   imginfo[i]["owner"]   ', price='   imginfo[i]["price"]   '"';
    }

    allImages  = '<img class="myImg" src='   imgurl[0][i]   ' id='   i   '_id onclick="openpopup(this.src)" '   owner   '>';

  }

  $('#photos').append(allImages);

};
  

Комментарии:

1. Большое спасибо!! Это работает!

Ответ №2:

попробуйте это, вы также можете использовать троичный оператор, если требуется.

 window.onload = function () {
var allImages = "";
var owner,price;
var imgurl = getImages();
var imginfo = imgurl[1];
console.log(imginfo);
for (var i = 0, j = 298; i < j; i  ) {
    var title="";
    if(imgurl[0][i] == undefined){imgurl[0][i]="image/upload.png"}

    if(!(typeof imginfo[i] === "undefined")){
     title="owner=" imginfo[i]["owner"] ", price=" imginfo[i]["price"] "";
    }

    allImages  = '<img class="myImg" src='  imgurl[0][i]  ' id=' i '_id onclick="openpopup(this.src)" title="' title '">';
}

$('#photos').append(allImages);

};
</script>