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

通过自定义jQuery代码创建幻灯片库。无法在JavaScript幻灯片中嵌入标签

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%;">

我该如何解决它？

来源

2013-11-23 Slaythern Aareonna

将它们编码为html实体，在php中，例如可以用'htmlspeciachars'来完成。 –

您可以通过适当关闭double quotes和更换用single quote双引号这是围绕#

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

包解决它，你可以看到在here.

来源

2013-11-23 20:48:19

不当语法您内使用"您属性值，即结束属性。你需要逃离"与属性中"，像

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

来源

2013-11-23 20:50:45 lshearer

嵌入标签，在你的代码的标题部分使用<embed src=#>。此外，给人一种标签内引用时，使用单引号'，而不是"因为这不必要地关闭属性

来源

2013-11-23 20:55:33 Basilisk

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

在你情我宁愿作出这样的代码，例如这样的：这样的问题

$($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 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像这样构建：

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

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

来源

2013-11-23 21:10:34

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

回答

相关问题