javascript - Tumblr 主题帖子 - 隐藏日期和标签不起作用

Question

5 月 26 日编辑:

我正在使用您将在下面看到的编码作为@AchrafJEDAY 的回答(我也将其包含在此处)。编码以某种方式损坏，当我单击日期或标签按钮以显示任何帖子的日期或标签时，它吓坏了；在整个页面刷新为“/？”之前，您只看到了片刻。在 URL 的末尾，日期和标签都再次隐藏。我不确定这是为什么，但我非常感谢任何人提供的帮助!谢谢!!

编码:

CSS

.postdatebutton{
                float:left;
                position:relative;
                top:0px;
                left:0px;
                width:50px;
                height:15px;
                border:1px #83174C solid;
                background-color:rgba(255, 230, 240, 0.8);
                font-family: 'Indie Flower', cursive;
                letter-spacing:2px;
                text-align:center;
                padding-top:5px;
                color:black;
                font-size:14px;
                text-decoration:underline;
            }
            .postdatebutton button{
                font-family: 'Indie Flower', cursive;
                text-decoration:underline;
            }
            .postdate{
                width: 100%;
                text-align: center;
                display:none;
            }
            /*TAGS*/  
            .tags {
                width:415px;
                text-transform:uppercase;
                line-height:120%;
                font-size:15px;
                text-align:center;
                padding:2px;
                text-decoration:underline;
                -moz-transition-duration:0.5s;
                -webkit-transition-duration:0.5s;
                -o-transition-duration:0.5s;
            }
            .tags a {
                color:#BB0B20;
                letter-spacing:1px;
                padding:1px;
            }
            .posttagbutton{
                float:left;
                position:relative;
                top:0px;
                left:0px;
                width:50px;
                height:15px;
                border:1px #83174C solid;
                background-color:rgba(255, 230, 240, 0.8);
                font-family: 'Indie Flower', cursive;
                letter-spacing:2px;
                text-align:center;
                padding-top:5px;
                color:black;
                font-size:14px;
                text-decoration:underline;
            }
            .posttagbutton button{
                font-family: 'Indie Flower', cursive;
                text-decoration:underline;
            }
            .posttag {
                width: 100%;
                text-align: center;
                display:none;
            }

            #stuff table{
                position:relative;
                width:100%;
                text-align:center;
            }

HTML

<table>
<tbody>
<tr>
        <!---LIKE----> 
<td><div class="postlike">{LikeButton}</div> </td>
        <!---REBLOG----> 
<td><div id="postreblog"><a href="{ReblogURL}">Reblog</a></div> </td>
        <!---NOTES----> 
<td><div class="postnote">{block:NoteCount} <a href="{Permalink}">Notes</a>{/block:NoteCount}</div> </td>
        <!---VIA----> 
<td><div class="postfrom">{block:RebloggedFrom}<a href="{ReblogParentURL}">From</a>{/block:RebloggedFrom}</div> </td>
        <!---SOURCE----> 
<td><div class="postsource"> {block:ContentSource}<a href="{SourceURL}">Orig-Poster</a>{/block:ContentSource}</div> </td>
        <!---DATE BUTTON----> 
<td><div class="postdatebutton"><button onclick="myFunction6(this)">Date</button></div></td>
        <!---TAGS BUTTON----> 
<td><div class="posttagbutton"><button onclick="myFunction7(this)">Tags</button></div></td></tr></tbody></table>
            <!---HIDDEN DATE----> 
<div class="postdate" style="display:none;"><p>{block:Date}<a href="{Permalink}"> {MonthNumberWithZero}-{DayOfMonthWithZero} {24Hour}:{Minutes}</a>{/block:Date}</p></div>
            <!---HIDDEN TAGS----> 
<div class="posttag" style="display:none;"><div class="tags"><p>{block:Tags}<a href="{TagURL}">#&nbsp;{Tag}</a>{/block:Tags}</p></div></div>

JS

<!---SCRIPT FOR DATE AND TAGS----> 
<script>
function myFunction6 ( event ) {

    var node = event.parentNode;
    for (i = 0; i < 5; i++) { 
        node = node.parentNode;
    }

    var x = node.getElementsByClassName("postdate");
    if (x[0].style.display === 'block') {
        x[0].style["display"] = "none";
    }
    else {
        x[0].style["display"] = "block";
    }

}
</script>
<script>

function myFunction7( event ) {

    var node = event.parentNode;
    for (i = 0; i < 5; i++) { 
        node = node.parentNode;
    }

    var x = node.getElementsByClassName("posttag");
    if (x[0].style.display === 'block') {
        x[0].style.display = 'none';
    }
    else {
        x[0].style.display = 'block';
    }
}
</script>

Answer 1

function myFunction1 ( event ) {

    var node = event.parentNode;
    for (i = 0; i < 5; i++) { 
        node = node.parentNode;
    }

    var x = node.getElementsByClassName("postdate");
    if (x[0].style.display === 'block') {
        x[0].style["display"] = "none";
    }
    else {
        x[0].style["display"] = "block";
    }

}

function myFunction2( event ) {

    var node = event.parentNode;
    for (i = 0; i < 5; i++) { 
        node = node.parentNode;
    }

    var x = node.getElementsByClassName("posttag");
    if (x[0].style.display === 'block') {
        x[0].style.display = 'none';
    }
    else {
        x[0].style.display = 'block';
    }
}

<div id="stuff"><div class="picsize"><div class="textpost"><h3>  Testing Text Post - Title  </h3><p><span><a href="http://allystestblog1818.tumblr.com/post/159609010143">allystestblog1818</a></span>:</p><blockquote><h2>Headline</h2><h2><b>Headline Bold</b></h2><h2><i>Headline Italic</i></h2><p><b>Bold text,</b> <i>Italic text,</i> <span><a href="http://allystestblog1818.tumblr.com/">Link text</a></span></p><ol><li>Numbered&nbsp;<br></li><li>List<br></li></ol><ul><li>Bullet<br></li><li>List<br></li></ul><blockquote><p>Indented text</p></blockquote><p>Regular text</p><p>Line break<br></p><hr><p>Picture</p><figure class="tmblr-full"><img src="https://68.media.tumblr.com/1250d273b9e9b4860d73aa893361ec20/tumblr_inline_oogr5xEk1J1txz9li_540.jpg" class=""></figure><p class=""><span><a href="http://allystestblog1818.tumblr.com/post/159609010143/testing-text-post-title" class="tmblr-truncated-link read_more">Keep reading</a></span></p></blockquote></div></div><div class="picsize"></div><p></p><table><tbody><tr><td><div class="postlike"><div class="like_button" data-post-id="160506016653" data-blog-name="wisdomsprydethemetestblog" id="like_button_160506016653"><iframe id="like_iframe_160506016653" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=wisdomsprydethemetestblog&amp;post_id=160506016653&amp;color=black&amp;rk=4ktb4Bma&amp;root_id=159609010143" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_160506016653"></iframe></div></div> </td><td><div id="postreblog"><a href="https://www.tumblr.com/reblog/160506016653/4ktb4Bma">Reblog</a></div> </td><td><div class="postnote"> <a href="https://wisdomsprydethemetestblog.tumblr.com/post/160506016653/testing-text-post-title">Notes</a></div> </td><td><div class="postfrom"><a href="https://pokemonthemetestblog.tumblr.com/post/159612507917/testing-text-post-title">From</a></div> </td><td><div class="postsource"> <a href="http://allystestblog1818.tumblr.com/post/159609010143/testing-text-post-title">Orig-Poster</a></div> </td><td><div class="postdatebutton"><button onclick="myFunction1(this)">Date</button></div></td><td><div class="posttagbutton"><button onclick="myFunction2(this)">Tags</button></div></td></tr></tbody></table><div class="postdate" style="display:none;"><p><a href="https://wisdomsprydethemetestblog.tumblr.com/post/160506016653/testing-text-post-title">05-10 1:52</a></p></div><div class="posttag" style="display:none;"><div class="tags"><p><a href="https://wisdomsprydethemetestblog.tumblr.com/tagged/Test-text-post">#&nbsp;Test text post</a><a href="https://wisdomsprydethemetestblog.tumblr.com/tagged/tags-tags-tags">#&nbsp;tags tags tags</a></p></div></div> 
</div>