这听起来可能很愚蠢,但有没有办法让我制作一个包含其他标签的自定义 HTML 标签?
就像现在我有这样的东西:
<div>
<img></img>
<p></p>
</div>
有没有办法将所有这些放入一个更简单的自定义标签中,如下所示:
<caption-image pic_src="/path" p_text="blahblahblah" />
如果 Javascript 做不到,也许可以使用类似 XML 的方式。
我想要这样的东西的原因是我需要制作大量这样的东西,它会简化 html 并使其更容易更改。
最佳答案
您可以使用框架来执行此操作,例如 AngularJS 或 ReactJS。但我想你现在学习起来会有些困难,所以你可以自己用一些 Javascript 来完成。
您可以像现在一样创建标签,然后使用 javascript 解析它,从中获取您需要的内容并构建您的 HTML 页面。
这会为你做(我假设你正在使用 jQuery):
<caption-image pic_src="path1.png" p_text="blahblahblah"></caption-image>
<caption-image pic_src="path2.png" p_text="123123123"></caption-image>
<caption-image pic_src="path3.png" p_text="this is an image"></caption-image>
<caption-image pic_src="path4.png" p_text="just some text"></caption-image>
<div id="someContainer">
<figure id="figTemplate">
<img src="" alt="">
<figcaption></figcaption>
</figure>
</div>
<script>
$.each($('caption-image'), function (key, obj) {
var src = $(obj).attr('pic_src');
var p_text = $(obj).attr('p_text');
$(obj).hide(); //or remove if you want $(obj).remove()
var clone = $('#figTemplate').clone();
clone.removeAttr('id')
.children('img').attr('src', src).attr('alt', p_text).end()
.children('figcaption').text(p_text);
$('#someContainer').append(clone);
});
</script>
我使用了 figure
元素,因为它完全符合您的要求,但您也可以使用 div
、img
和 来做同样的事情>p
关于javascript - 有没有办法制作包含其他标签的自定义 HTML 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40556715/