Owl Carousel data-dot 属性内的链接答案

【问题标题】：Link inside Owl Carousel data-dot attributeOwl Carousel data-dot 属性内的链接
【发布时间】：2020-03-06 11:01:06
【问题描述】：

当我在 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>"

【问题讨论】：

我发现问题出在“目标”属性上。

标签： jquery anchor owl-carousel-2

【解决方案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。

【讨论】：