Question

当我在data-dot属性内添加链接（标记）时，它会破坏布局。例如，

data-dot="<div class='meta-content'><img src='https://imagelink.com'><h4>Name</h4><a href="https://link.com" target='_blank'>Web Address</a></div>"

Answer 1

要将HTML存储在内联的data属性中，您需要对内容进行HTML编码，以免干扰外部HTML结构：

$('a').on('click', function(e) {
  e.preventDefault();
  $('#output').append($(this).data('dot'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-dot="&lt;div class='meta-content'&gt;&lt;img src='https://imagelink.com'&gt;&lt;h4&gt;Name&lt;/h4&gt;&lt;a href='https://link.com' target='_blank'&gt;Web Address&lt;/a&gt;&lt;/div&gt;">Click me</a>

<div id="output"></div>

话虽这么说，将HTML存储在data属性中并不是一个好的模式。我建议改为在其中存储一个序列化的数据结构，并使用它来构建您从DOM clone()来的HTML。

猫头鹰轮播数据点属性内的链接

1 个答案: