Question

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

HTML：

<div id="backgrounds">
    <img src="img/site/myimg.jpg" alt="Sample" data-title2="My Subject" data-desc="My Desc" />
    <img src="img/site/myimg2.jpg" alt="Sample" data-title2="My Subject" data-desc="My Desc" />
    <img src="img/site/myim3.jpg" alt="Sample" data-title2="My Subject" data-desc="My Desc" />
</div>

JS功能：

function ChangeBackground(background, direction) {
    if (is_animating)
        return;
    is_animating = true;

    $background = $(background);
    $newItem = null;
    if (direction == -1) {
        $newItem = $background.prev();

        if ($newItem.length == 0) {
            $newItem = $("#backgrounds img").last();
        }
    } else {
        $newItem = $background.next();

        if ($newItem.length == 0) {
            $newItem = $("#backgrounds img").first();
        }
    }


    $background.fadeOut(300);
    $newItem.fadeIn(300, function () {
        $("#backgrounds img").removeClass("current");
        $newItem.addClass("current");
        is_animating = false;
    });

    $clone = $("div.item.current").clone();
    $clone.removeClass("current").addClass("new");
    $clone.find("h1").html($newItem.attr("alt"));
    $clone.find("h2").html($newItem.attr("data-title2"));
    $clone.find("p").html($newItem.attr("data-desc"));
    $clone.css({ display: "none" });

    $("div.item.current").after($clone);

    $("div.item.current").fadeOut(300, function () {
        $(this).remove();
    });

    $clone.fadeIn(300, function () {
        $(this).removeClass("new").addClass("current");
    });
}

它完美无缺。 data-desc就像幻灯片标题。我想要，在这个标题中加入一个标记。

所以：

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

但是不起作用。当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%;">

我该如何解决？

Answer 1

您可以通过正确关闭double quotes并将single quote替换为#的双引号来解决问题。{/ 1}}

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

您可以注意到here.

上的语法不正确

Answer 2

您在属性值中使用"，该属性值将结束该属性。您需要在属性中使用"转义"，例如

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

Answer 3

要嵌入代码，请在代码的标题部分使用<embed src=#>。此外，在标记内提供引用时，请使用单引号'而不是"，因为这会不必要地关闭属性

Answer 4

在“视图”中执行“查看”是不好的做法。我的意思是，如果您创建了一些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>

然后您可以使用以下方式获取内部HTML：

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

因为你的很多HTML幻灯片的构建都会出现这样的问题：

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

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

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

4 个答案: