Question

此脚本应添加必要的html，以在特定类中的图像上方创建文本块。

我必须手动将几百个图像添加到Wordpress页面中，并在进行过程中添加类。这足够乏味，所以我希望能够返回并运行脚本以将html添加到它所属的页面中。

我认为必须有一种更简单的方法，因此经过2天的反复试验，我写了自己的第一个脚本并学到了TON！是的，我。这是我的Fiddle，正是我要完成的工作。

html脚本之前

<figure><a href="https://www.w3schools.com/howto/img_nature_wide.jpg"><img class="notplus" width="400px" height="auto" src="https://www.w3schools.com/howto/img_nature_wide.jpg"></a><figcapton>the figcaption</figcapton></figure>

<figure><a href="https://www.w3schools.com/howto/img_nature_wide.jpg"><img class="plus" width="400px" height="auto" src="https://www.w3schools.com/howto/img_nature_wide.jpg"></a><figcapton>the figcaption</figcapton></figure>

css

/* Container holding the image and the text */
.container {
    position: relative;
}

/* Bottom right text */
.text-block {
    position: absolute;
    bottom: 20px;
    right: 5px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

.plus {
    border: 7px solid #818a91;
}

img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

脚本

 var htmlcon = [
  '<div class="container"></div>',
 ]
var htmltex = [
  '<div class="text-block">the new text</div>',
]
$(document).ready(function(){
    $('.plus').closest('a').append(htmlcon),
    $('.container').append(htmltex);
});

最终结果应该是

<figure><a href="https://www.w3schools.com/howto/img_nature_wide.jpg"><img class="plus" width="400px" height="auto" src="https://www.w3schools.com/howto/img_nature_wide.jpg"></a><div class="container"><div class="text-block">the new text</div></div><figcapton>the figcaption</figcapton></figure>

因此，我希望能够一次在帖子编辑器中全部添加图像，然后运行脚本，以便将div添加到它们所属的位置，然后保存并发布。

Answer 1

提供文本不是动态的，正如注释中所建议的那样，您所需要的只是在dom上加载了一些js。

  document.addEventListener("DOMContentLoaded", function() {
    var plusImages = [].slice.call(document.querySelectorAll('figure .plus'));
    var newText = '<div class="container"><div class="text-block">the new text</div></div>';

    plusImages.forEach( function(plusImage) {
      plusImage.parentNode.insertAdjacentHTML('afterend', newText)
    })

  });

澄清一下，这不会更改数据库，而只会更改前端。

在发布到Wordpress上的帖子之前，我该如何对其运行jQuery脚本？

1 个答案: