使用Li childs - JavaScript制作最近的帖子 [英] Make Recent Posts Label Box using Li childs - JavaScript

问题描述

我需要帮助才能让RecentPosts Box显示我为5个li：n个孩子定义的标记的最后一个帖子。这是我的博客关于科技新闻。 Thah在网站上显示最近发布的帖子，但我想通过标签发布最新帖子。 TRITEK

希望你们能帮助我。

#featuredpost {width ：1170px;溢出：隐藏;显示：块;位置：相对; margin：15px auto;} #slides * {-moz-box-sizing：border-box; -webkit-盒大小：边界盒; box-sizing：border-box} #slides ul，＃slides li {padding：0;余量：0;列表样式：无; position：relative} #slides ul {height：320px} #slides li {width：50％;高度：100％;位置：绝对的;显示：无} #slides li：nth-​​child（1），#slides li：nth-​​child（2），#slides li：nth-​​child（3），#slides li：nth-​​child（4），#slides li：nth-​​child（5）{display：block} #slides li：nth-​​child（1）{left：0; top：0} #slides li：nth-​​child（2）{left：50％;宽度：25％;身高：50％}＃滑行li：nth-​​child（3）{left：75％;宽度：25％;身高：50％}＃滑行li：nth-​​child（4）{left：50％;顶部：50％;宽度：25％;身高：50％}＃滑行li：nth-​​child（5）{left：75％;顶部：50％;宽度：25％; height：50％} #slides li：nth-​​child（1）h4 {overflow：hidden;字体大小：20像素;底部：18像素;颜色：#FFF;宽度：汽车;文本对齐：中心;文本转换：大写;高度：自动; FONT-FAMILY：宋体;行高：32PX;左：10;保证金：0像素; margin-right：10px;} #slides li：nth-​​child（1）.label_text {font-size：30px;显示：块;底部：10px的;左：10px的;填充：0; font-family：Arial;} #slides a {background-color：rgba（40,40,40,1）;显示：块;宽度：100％;高度：100％; overflow：hidden} #slides img {display：block;宽度：100％;高度：自动;边界：0;填充：0;背景色：＃333; -moz-transform：scale（1.0）rotate（0）; -webkit-transform：scale（1.0）rotate（0）; -ms-transform：scale（1.0）rotate（0）; transform：scale（1.0）rotate（0）;过渡：全部为0.6s线性;} #slides li a：悬停img {不透明度：0.8;过渡：全0无障碍; -webkit-过渡：全0无障碍; -moz-transition：全0无障碍; -o-transition：全部0s ease} #slides .overlayx {position：absolute; left：0; top：0; z-index：2; width：100％; height：100％;} #slides h4 {position：absolute;身高：自动;底部：0像素;字体大小：14px的; FONT-FAMILY：宋体;左：10px的;填充：5px 10px;颜色：#FFF;的z-index：3;行高：20像素;字体重量：正常;背景：RGBA（60,60,60,0.8）;文本转换：大写;保证金权：10px的; text-align：center; border-bottom-color：rgb（8,176,255）; border-bottom-style：solid; border-bottom-width：3px;} #slides li：nth-​​child（1）.overlayx {display：none;} #slides li：hover .overlayx {opacity：0.1;} #slides li：nth-​​child（2）.overlayx {display：none;}＃幻灯片li：nth-​​child（3）.overlayx {display：none;}＃幻灯片li：nth-​​child（4）.overlayx {display：none;}＃幻灯片li：nth-​​child（5）.overlayx {display：none;}

< pre class =snippet-code-html lang-html prettyprint-override> < div id =featuredpost>< / div> tagName：[Android安卓系统，Inovação，Gaming，Oreo，SnapChat] 添加到以下修改后的代码中

 （函数（e）{
 var h = {
 blogURL：，
 MaxPost：5，
 idcontaint ：#featuredpost，
 ImageSize：500，
间隔：10000，
 autoplay：false，
 loadingClass：loadingxx，
 pBlank：https://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey。 gif，
 MonthNames：[Jan，Feb，Mar，Apr，May，Jun，Jul，Aug，Sep，Oct， Nov，Dec]，
 tagName：false 
}; 
 h = e.extend（{}，h，a）; 
 var g = e（h.idcontaint）; 
 var c = h.blogURL; 
 var d = h.MaxPost * 200; 
 if（h.blogURL ===）{
c = window.location.protocol +//+ window.location.host 
} 
 g.html（ '< div id =slides>< ul class =randomnya>< / ul>< / div>< div id =buttons>< a href =＃id =prevxtitle =prev>< / a>< a href =＃id =nextxtitle =next>< / a>< / div>）。addClass （h.loadingClass）; 
 var l =; 
 var count = 0; 
 var f = function（w）{
 var q，k，m，u，x，p，t，v，r，tt，ts =，
s = w.feed 。条目; $（var o = 0; o< s.length; o ++）{
 for（var n = 0; n< s [o] .link.length; n ++）{
 if（s [o] .link [n] .rel ==alternate）{
q = s [o] .link [n] .href; 
 break 
 
 
 if（media $ thumbnailin s [o]）{
u = s [o] .media $ thumbnail.url.replace （/ \ / s [0-9] + \ -c / g，/ s+ h.ImageSize +-c）
} else {
u = h.pBlank.replace （/ \ / s [0-9] +（\ -c | \ /）/，/ s+ h.ImageSize +$ 1）
} 
k = s [o ] .title伪$吨; 
 ts = s [o] .published。$ t; 
 tt = Date.parse（ts）; 
l + ='< li data-date ='+ tt +'>< a href ='+ q +'title ='+ k +'>< div class =overlayx>< / div>< h4>< / div +>< h4> + k + / h4>'+ t +'< / span> '+ m +< / span>< / div>< / li> 
} 
 count ++; 
 if（count === h.tagName.length）{
 var el = e（'< div>< / div>）.html（l）; 
e（'li'，el）.sort（function（a，b）{
 return e（b）.attr（'data-date'） -  e（a）.attr（'data-日期'）; 
}）。appendTo（ul，g）; 
} 
}; 
 var b = function（）{
 if（h.tagName === false）{
 i =; 
 e.ajax（{
 url：c +/ feeds / posts / default+ i +？max-results =+ h.MaxPost +& orderby = published& alt = json -in-script，
成功：f，
 dataType：jsonp，
 cache：true 
}）
} else {
 for var q = 0; q  e.ajax（{
 url：c +/ feeds / posts / default /  -  /+ h.tagName [ q] +？max-results = 1& orderby = published& alt = json-in-script，
成功：f，
 dataType：jsonp，
缓存：true $ （）函数（）{$ b $} 
} 
}（function（）{
 setTimeout（function（）{
e（＃prevx）。 be（＃slides li：first）。before（e（＃slides li：last））; 
返回false 
}）; $（$＃$ be（＃nextx）。click（function（）{
e（＃slides li：last）。假
}）; 
 if（h.autoplay）{
 var k = h.interval; 
 var l = setInterval（rotate（），k）; $（幻灯片李：最后））; 
 e（＃幻灯片锂：第一）。 
e（＃slides）。hover（function（）{
 clearInterval（l）
}，function（）{
l = setInterval（rotate（），k） 
}）; 
 
函数j（）{
e（＃nextx）。click（）
} 
} 
 g.removeClass（h.loadingClass）
}，d）
}）（）
}; 
 e（document）.ready（b）
}）（jQuery）
}; 
 
函数rotate（）{
 $（'＃nextx'）。click（）; 
}; 
 document.write（''）
 
 //<！[CDATA [
 $（document）.ready（function（）{
 FeaturedPost（{
 blogURL：https://trit3k.blogspot.com，
 MaxPost：5，
 idcontaint：#featuredpost，
 ImageSize：500，
 tagName： [Android，Inovação，Gaming，Oreo，SnapChat] 
}）; 
}）; 
 //]]> 
  

I need help to make RecentPosts Box show the last post for the tag that I defined for the 5 li:nth-childs. This is for my blog about tech news. Thah one is on site appears the recent posts but I would like to have the latest posts but by tag.TRITEK

Hope that you guys can help me please. Thanks a lot.

function FeaturedPost(a) {
    (function(e) {
        var h = {
            blogURL: "",
            MaxPost: 5,
            idcontaint: "#featuredpost",
            ImageSize: 500,
            interval: 10000,
            autoplay: false,
            loadingClass: "loadingxx",
            pBlank: "https://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",
            MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tagName: false
        };
        h = e.extend({}, h, a);
        var g = e(h.idcontaint);
        var c = h.blogURL;
        var d = h.MaxPost * 200;
        if (h.blogURL === "") {
            c = window.location.protocol + "//" + window.location.host
        }
        g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);
        var f = function(w) {
            var q, k, m, u, x, p, t, v, r, l = "",
                s = w.feed.entry;
            for (var o = 0; o < s.length; o++) {
                for (var n = 0; n < s[o].link.length; n++) {
                    if (s[o].link[n].rel == "alternate") {
                        q = s[o].link[n].href;
                        break
                    }
                }
                if ("media$thumbnail" in s[o]) {
                    u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
                } else {
                    u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
                }
                k = s[o].title.$t;
                l += '<li><a href="' + q + '" title="' + k + '"><div class="overlayx"></div><img class="random" src="' + u + '" title="' + k + '"><h4>' + k + '</h4>' + t + '</span> ' + m + "</span></div></li>"
            }
            e("ul", g).append(l)
        };
        var b = function() {
            var i = "/-/" + h.tagName;
            if (h.tagName === false) {
                i = "";
                e.ajax({
                    url: c + "/feeds/posts/default" + i + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
                    success: f,
                    dataType: "jsonp",
                    cache: true
                })
            } else {
                e.ajax({
                    url: c + "/feeds/posts/default" + i + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
                    success: f,
                    dataType: "jsonp",
                    cache: true
                })
            }(function() {
                setTimeout(function() {
                    e("#prevx").click(function() {
                        e("#slides li:first").before(e("#slides li:last"));
                        return false
                    });
                    e("#nextx").click(function() {
                        e("#slides li:last").after(e("#slides li:first"));
                        return false
                    });
                    if (h.autoplay) {
                        var k = h.interval;
                        var l = setInterval("rotate()", k);
                        e("#slides li:first").before(e("#slides li:last"));
                        e("#slides").hover(function() {
                            clearInterval(l)
                        }, function() {
                            l = setInterval("rotate()", k)
                        });

                        function j() {
                            e("#nextx").click()
                        }
                    }
                    g.removeClass(h.loadingClass)
                }, d)
            })()
        };
        e(document).ready(b)
    })(jQuery)
};

function rotate() {
    $('#nextx').click();
};
document.write('')

//<![CDATA[
$(document).ready(function() {
    FeaturedPost({
        blogURL: "https://trit3k.blogspot.com",
        MaxPost: 5,
        idcontaint: "#featuredpost",
        ImageSize: 500,
        tagName: false
    });
});
//]]>

#featuredpost {
     width: 1170px;
     overflow: hidden;
     display: block;
     position: relative;
  margin:15px auto;
}
 #slides *{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
 #slides ul,#slides li{
    padding:0;
    margin:0;
    list-style:none;
    position:relative
}
 #slides ul{
    height:320px
}
 #slides li{
    width:50%;
    height:100%;
    position:absolute;
    display:none
}
 #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){
    display:block
}
 #slides li:nth-child(1){
    left:0;
    top:0
}
 #slides li:nth-child(2){
    left:50%;
    width:25%;
    height:50%
}
 #slides li:nth-child(3){
    left:75%;
    width:25%;
    height:50%
}
 #slides li:nth-child(4){
    left:50%;
    top:50%;
    width:25%;
    height:50%
}
 #slides li:nth-child(5){
    left:75%;
    top:50%;
    width:25%;
    height:50%
}
 #slides li:nth-child(1) h4 {
    overflow:hidden;
    font-size:20px;
    bottom:18px;
    color:#fff;
    width:auto;
    text-align:center;
    text-transform:uppercase;
    height:auto;
    font-family:Arial;
    line-height:32px;
    left:10;
   margin:0px;
   margin-right:10px;
}
 #slides li:nth-child(1) .label_text {
    font-size:30px;
    display:block;
    bottom:10px;
    left:10px;
     padding:0;
    font-family:Arial;
}
 #slides a{
      background-color:rgba(40,40,40,1);
    display:block;
    width:100%;
    height:100%;
    overflow:hidden
}
 #slides img{
    display:block;
    width:100%;
    height:auto;
    border:0;
    padding:0;
    background-color:#333;
    -moz-transform:scale(1.0) rotate(0);
    -webkit-transform:scale(1.0) rotate(0);
    -ms-transform:scale(1.0) rotate(0);
    transform:scale(1.0) rotate(0);
    transition:all 0.6s linear;
}
 #slides li a:hover img {
   opacity:0.8;
transition:all 0s ease;
-webkit-transition:all 0s ease;
-moz-transition:all 0s ease;
-o-transition:all 0s ease
}
 #slides .overlayx{
   position:absolute;
left:0;
top:0;
z-index:2;
width:100%;
height:100%;
}
 #slides h4{
    position:absolute;
    height: auto;
    bottom:0px;
    font-size:14px;
    font-family:Arial;
    left:10px;
    padding:5px 10px;
    color:#fff;
    z-index:3;
    line-height:20px;
    font-weight:normal;
     background:rgba(60,60,60,0.8);
    text-transform:uppercase;
    margin-right:10px;
   text-align: center;
   border-bottom-color: rgb(8, 176, 255);
border-bottom-style: solid;
border-bottom-width: 3px;
}
 #slides li:nth-child(1) .overlayx{
    display:none;
}
 #slides li:hover .overlayx{
    opacity:0.1;
}
 #slides li:nth-child(2) .overlayx{
    display:none;
}
#slides li:nth-child(3) .overlayx{
    display:none;
}
#slides li:nth-child(4) .overlayx{
    display:none;
}
#slides li:nth-child(5) .overlayx{
    display:none;
}

<div id="featuredpost"></div>

解决方案

Add your tags list tagName: ["Android","Inovação","Gaming", "Oreo","SnapChat"] to the following modified code

function FeaturedPost(a) {
    (function(e) {
        var h = {
            blogURL: "",
            MaxPost: 5,
            idcontaint: "#featuredpost",
            ImageSize: 500,
            interval: 10000,
            autoplay: false,
            loadingClass: "loadingxx",
            pBlank: "https://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",
            MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tagName: false
        };
        h = e.extend({}, h, a);
        var g = e(h.idcontaint);
        var c = h.blogURL;
        var d = h.MaxPost * 200;
        if (h.blogURL === "") {
            c = window.location.protocol + "//" + window.location.host
        }
        g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);
        var l = "";
        var count = 0;
        var f = function(w) {
            var q, k, m, u, x, p, t, v, r, tt, ts = "",
                s = w.feed.entry;
            for (var o = 0; o < s.length; o++) {
                for (var n = 0; n < s[o].link.length; n++) {
                    if (s[o].link[n].rel == "alternate") {
                        q = s[o].link[n].href;
                        break
                    }
                }
                if ("media$thumbnail" in s[o]) {
                    u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
                } else {
                    u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
                }
                k = s[o].title.$t;
                ts = s[o].published.$t;
                tt = Date.parse(ts);
                l += '<li data-date="' + tt + '"><a href="' + q + '" title="' + k + '"><div class="overlayx"></div><img class="random" src="' + u + '" title="' + k + '"><h4>' + k + '</h4>' + t + '</span> ' + m + "</span></div></li>"
            }
            count++;
            if (count === h.tagName.length) {
                var el = e( '<div></div>' ).html(l);
                e('li', el).sort(function (a, b) {
                   return e(b).attr('data-date') - e(a).attr('data-date');
                }).appendTo("ul", g);
            }
        };
        var b = function() {
            if (h.tagName === false) {
                i = "";
                e.ajax({
                    url: c + "/feeds/posts/default" + i + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
                    success: f,
                    dataType: "jsonp",
                    cache: true
                })
            } else {
                for (var q = 0; q < h.tagName.length; q++) {
                    e.ajax({
                        url: c + "/feeds/posts/default/-/" + h.tagName[q] + "?max-results=1&orderby=published&alt=json-in-script",
                        success: f,
                        dataType: "jsonp",
                        cache: true
                    })
                }
            }(function() {
                setTimeout(function() {
                    e("#prevx").click(function() {
                        e("#slides li:first").before(e("#slides li:last"));
                        return false
                    });
                    e("#nextx").click(function() {
                        e("#slides li:last").after(e("#slides li:first"));
                        return false
                    });
                    if (h.autoplay) {
                        var k = h.interval;
                        var l = setInterval("rotate()", k);
                        e("#slides li:first").before(e("#slides li:last"));
                        e("#slides").hover(function() {
                            clearInterval(l)
                        }, function() {
                            l = setInterval("rotate()", k)
                        });

                        function j() {
                            e("#nextx").click()
                        }
                    }
                    g.removeClass(h.loadingClass)
                }, d)
            })()
        };
        e(document).ready(b)
    })(jQuery)
};

function rotate() {
    $('#nextx').click();
};
document.write('')

//<![CDATA[
$(document).ready(function() {
    FeaturedPost({
        blogURL: "https://trit3k.blogspot.com",
        MaxPost: 5,
        idcontaint: "#featuredpost",
        ImageSize: 500,
        tagName: ["Android","Inovação","Gaming", "Oreo","SnapChat"]
    });
});
//]]>

这篇关于使用Li childs - JavaScript制作最近的帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！