无法在JavaScript幻灯片中嵌入标记

通过自定义jQuery代码创建幻灯片库

HTML:

它工作得很好。数据描述类似于幻灯片标题。我想在这个标题中嵌入一个标签

因此：

但是不起作用。通过DevTools检查代码时，我看到：

<img src="img/site/myimg3.jpg" alt="Sample" data-title2="My Subject" data-desc="My desc &lt;a href=" #"="" style="width: 1451px; height: 956.0029282576867px; margin-left: -725.5px; left: 50%;">

---

如何修复它？

您可以通过正确关闭

双引号

并将双引号替换为围绕

的

单引号

来修复它

您可能会注意到在属性值中使用的

“

”语法不正确，这将结束属性。您需要在属性中使用

“

转义

”

，如

---

要嵌入标记，请在代码的标题部分使用

。 此外，在标记中提供引用时，请使用单引号

“

而不是

”

，因为这会不必要地关闭属性

在“视图”中执行“视图”是不好的做法。我的意思是，如果您创建了一些XML结构，并且一个元素与另一个元素相关，那么必须通过链接来完成，而不是通过将一个元素输入到另一个元素中来完成

在您的情况下，我更愿意这样编写代码：

<div id="backgrounds">
    <img src="img/site/myimg.jpg" alt="Sample" data-title2="My Subject" data-desc="section.custom-tag" />
    <img src="img/site/myimg2.jpg" alt="Sample" data-title2="My Subject" data-desc="#bg-1" />
    <img src="img/site/myim3.jpg" alt="Sample" data-title2="My Subject" data-desc=".custom-class" />
</div>
<div style="display: none; visibility: hidden;">
    <section class="custom-tag">Custom <b>description</b> with any html within</section>
    <div id="bg-1">Here we go!</div>
    <span class="custom-class">Test</span>
</div>

---

（请参见Emmet[Zen]编码以获得更深入的理解）

将它们编码为html实体，例如，在php中，您可以使用

htmlspeciachars

进行编码。

<img src="img/site/myim3.jpg" alt="Sample" data-title2="My Subject" data-desc="My Desc <a href="#">My a tag</a> />

<img src="img/site/myimg3.jpg" alt="Sample" data-title2="My Subject" data-desc="My desc &lt;a href=" #"="" style="width: 1451px; height: 956.0029282576867px; margin-left: -725.5px; left: 50%;">

<img src="img/site/myim3.jpg" alt="Sample" data-title2="My Subject" data-desc="My Desc <a href='#'>My a tag</a>"/>

<img src="img/site/myim3.jpg" alt="Sample" data-title2="My Subject" data-desc="My Desc <a href=&quot;#&quot;>My a tag</a>" />

<div id="backgrounds">
    <img src="img/site/myimg.jpg" alt="Sample" data-title2="My Subject" data-desc="section.custom-tag" />
    <img src="img/site/myimg2.jpg" alt="Sample" data-title2="My Subject" data-desc="#bg-1" />
    <img src="img/site/myim3.jpg" alt="Sample" data-title2="My Subject" data-desc=".custom-class" />
</div>
<div style="display: none; visibility: hidden;">
    <section class="custom-tag">Custom <b>description</b> with any html within</section>
    <div id="bg-1">Here we go!</div>
    <span class="custom-class">Test</span>
</div>

$($newItem.attr("data-desc")).html()
// Or if you want to fetch with container tag use: 
$($newItem.attr("data-desc")).clone().wrap("<a/>").parent().html();

div.slider
    div.item*3
        img[src="smth.jpg"]
        div.custom-tag>{Content}