Question

我正在使用博客作为我的博客平台。在我的博客主页中，我创建了一个功能，可以从每个帖子的单个帖子中获取所有图像（我的主页中有5个帖子），然后将每个帖子的所有图像从单个帖子附加到单个滑块。

这是我的函数脚本（我将它放在<body>标记之后）：

<script type='text/javascript'>
//<![CDATA[

function stripTags(s, n) {
    return s.replace(/<.*?>/ig, "")
        .split(/\s+/)
        .slice(0, n - 1)
        .join(" ")
}

function rm(a) {
    var p = document.getElementById(a);
    img = p.getElementsByTagName("img").each( function(){
       $(".flexslider .slides").append($("<li>").append(this));
    });

    p.innerHTML = '<div class="entry-container"><div class="entry-content"><div class="entry-image"><div class='flexslider'><ul class='slides'></ul></div></div><div class="entry-header"><h1><a href="' + y + '">' + x + '</a></h1></div><p>' + stripTags(p.innerHTML, SNIPPET_COUNT) + '</p></div></div>'
}
//]]>
</script>

然后我的变量，每个帖子都有单个变量，每个帖子根据它的ID不同：

<script type='text/javascript'>var x="Post Title",y="http://myblog.url/post-url.html";rm("p8304387062855771110")

我的单个帖子标记：

<span id='p8304387062855771110'></span>

问题是，我的脚本中的追加功能不起作用。我忘记了代码中的某些内容吗？

Answer 1

你的jQuery / JavaScript很乱。节点列表上没有方法each。尽量不要混淆jQuery / JavaScript。并且您可以考虑在要插入的html上使用数组/连接以保持行长度可读。这样你可能已经注意到你的HTML引用不一致.1

var $p = $('#' + a);

$p.find('img').each(function () {
  var html = $('<li>').append($(this))
  $('.flexslider .slides').append(html);
});

var html = [
  '<div class="entry-container"><div class="entry-content">',
  '<div class="entry-image"><div class="flexslider">',
  '<ul class="slides"></ul></div></div><div class="entry-header">',
  '<h1><a href="',
  y,
  '">',
  x,
  '</a></h1></div><p>',
  stripTags(p.innerHTML, SNIPPET_COUNT),
  '</p></div></div>'
].join('');

$p.html(html);

1就个人而言，我更喜欢JS工作的单引号和HTML属性的双引号，而不是twain应该满足。

Answer 2

I think <li> doesnt work try li like this:

 $(".flexslider .slides").append($("li").append(this));

Answer 3

你可以摆脱type="text/javascript"和//<![CDATA[，毕竟是2014年; - ）

另外，.*?不是你的意思。

<script>
function stripTags(s, n) {
    return s.replace(/<[^>]*>/g, "") // Be careful with .*? : it is not correct
        .split(/\s+/)
        .slice(0, n - 1)
        .join(" ")
}

function rm(id) {
    var $p = $('#' + id);
    img = $p.find("img").each( function(){
       $(".flexslider .slides").append($("<li>").append(this));
    });

    p.innerHTML = '<div class="entry-container"><div class="entry-content"><div class="entry-image"><div class="flexslider"><ul class="slides"></ul></div></div><div class="entry-header"><h1><a href="' + y + '">' + x + '</a></h1></div><p>' + stripTags(p.innerHTML, SNIPPET_COUNT) + '</p></div></div>'
}
</script>

李附加功能不起作用

3 个答案: