Question

这可能听起来很愚蠢，但有没有办法可以制作包含其他标签的自定义HTML标签？

就像现在我有类似的东西：

<div>
    <img></img>
    <p></p>
</div>

有没有办法将所有内容放入更简单的自定义标记中，如下所示：

<caption-image pic_src="/path" p_text="blahblahblah" />

如果Javascript无法使用，请使用类似的XML。

我之所以喜欢这样的原因是我需要制作大量这些内容，这样可以简化html并使其更容易更改。

Answer 1

您可以使用框架来执行此操作，例如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

执行相同操作

有没有办法制作一个包含其他标签的自定义HTML标签？

1 个答案: