В основном я пытаюсь добавить подпись под каждым элементом img с именем класса img-caption, используя простой JavaScript. Я нашел несколько решений, но все они используют jQuery, и я ищу простое решение javascript.

На данный момент у меня есть этот нерабочий код (измененный с этот вопрос):

//insertAfter() needs to be updated
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function inserCaption() {
  
  var imgs = document.getElementsByTagName("img");

  for (var i = 0; i < imgs.length; i++) {
    var NewSpan = document.createElement("span");
    var Caption = document.getElementsByTagName("img")[i].getAttribute("title");
    NewSpan.innerHTML = Caption;
    var ImgTag = document.getElementsByTagName("img");
    //I need a function inserAfter() to insert the titles after each image
    insertAfter(ImgTag, NewSpan);
  }
}
<img title="Hi" class="img-caption" src="http://i.imgur.com/KnX16nj.png"/>

<img title="Hello" class="img-caption" style="height:126px; width: auto;" src="http://i.imgur.com/naajTCH.png"/>

<button style="display:blocK" onclick="inserCaption()">Display Image Title</button>

До сих пор я был в состоянии выбрать все элементы img и получить их title атрибуты. Мне не хватает выбора img с определенным именем класса img-caption и, что более важно, как на самом деле вставить соответствующий атрибут title после каждого img как элемент span .

Поскольку я только изменил существующую работу, я не знаю, как работает insertAfter(). Я не новичок, когда дело доходит до JavaScript, просто чтобы уточнить.

2
Dom 26 Авг 2017 в 21:41

3 ответа

Лучший ответ

Вы можете использовать querySelectorAll, чтобы найти элементы с определенной тег и класс так же, как jQuery:

var imgs = document.querySelectorAll("img.img-caption");

Я также изменился:

insertAfter(imgs[i], NewSpan);
//insertAfter() needs to be updated
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function inserCaption() {
  var imgs = document.querySelectorAll("img.img-caption");

  for (var i = 0; i < imgs.length; i++) {
    var NewSpan = document.createElement("span");
    var Caption = imgs[i].getAttribute("title");
    NewSpan.innerHTML = Caption;
    
    insertAfter(imgs[i], NewSpan);
  }
}
<img title="Hi" class="img-caption" src="http://i.imgur.com/KnX16nj.png" />

<img title="Hello" class="img-caption" style="height:126px; width: auto;" src="http://i.imgur.com/naajTCH.png" />

<button style="display:blocK" onclick="inserCaption()">Display Image Title</button>
1
Nelson Yeung 26 Авг 2017 в 18:53
function insertAfter(target, node) {
    let parent = target.parentNode;
    if(target.nextSibling !== null)
        parent.insertBefore(target.nextSibling, node);
    else
        parent.appendChild(node);
}
1
Nianyi Wang 27 Авг 2017 в 11:30
function applyCaption(image, index) {
  const caption = document.createElement('span');
  
  caption.classList.add('caption');
  caption.textContent = image.title;

  
  return image
    .parentNode
    .insertBefore(caption, image.nextSibling)
  ;
}

function inserCaption() {
  
  return Array
    .prototype
    .forEach
    .call(document.querySelectorAll('img'), applyCaption)
  ;
}
<button style="display:blocK" onclick="inserCaption()">Display Image Title</button>
<hr />

<img title="Hi" class="img-caption" src="http://i.imgur.com/KnX16nj.png"/>
<img title="Hello" class="img-caption" style="height:126px; width: auto;" src="http://i.imgur.com/naajTCH.png"/>
0
Hitmands 26 Авг 2017 в 18:52