Question

JS Total Noob在这里！我有一个脚本，通过单击图像本身在图像上添加叠加。现在我想在Tumblr上的所有照片帖子上运行此脚本。

我希望它在Indexpage上运行，其中可能连续有几个照片帖子。实际上，存在一些冲突，我似乎无法在同一页面上运行多个实例。

我试图清理我的代码，以便我可以在这个JSFiddle上进行说明。（请注意，脚本添加在html下面，因为它不会起作用）。所以这是一个照片帖子，文本帖子和第二张照片的HTML示例

点击第一张图片时效果很好。但是第二张图片造成了冲突 - 点击它会对第一张图片进行操作。

有什么想法吗？

非常感谢

这是CSS

body {background:#000;font-weight:300;}
#wrap{width:90%;margin:50px auto;}


/* ========= Header structure ========= */

#header{width:100%;margin:0px auto 100px;border:0px solid #444;}
#header H1 {margin:0;padding:0;font-weight:300;font-family: 'Open Sans', sans-serif;text-align: center;font-size:2.5em;color:#fff;}
#header H1 a{text-decoration:none;color:#fff;}
#header H2{font-weight:300;font-family: 'Open Sans', sans-serif;text-align: center;color:#777;margin:0;padding:0;font-size:1em;font-style:oblique;}

/* ========= Post structure ========= */

#post-indexpage{}
#post-permalinkpage{}
.a-post{font-weight:300;font-family: 'Open Sans', sans-serif;}


/* ========= Text post ========= */

.text-post{background:#F9F9F3;width:100%;margin:0px auto 0px;
z-index:3;position:relative;
padding-top:70px;padding-bottom:90px;}

.text-title H2 {text-align:center;font-family:'Lato', sans-serif;
font-weight: 600;margin-top:50px; margin-bottom:5px; padding:0px;
color: #42484b;
line-height: 1.3; font-weight:300;
text-transform: capitalize;}

.text-body{border:0px solid #000;width:70%;  color: #222;padding:0px 0px 50px 0px;
font-family: "PT Serif", Georgia, Times, "Times New Roman", serif;margin:0px auto;
line-height: 1.65;text-shadow: 2px 2px 0px #fff;
text-rendering: optimizeLegibility;}

.text-date{text-align:center;color:#999;font-style:oblique;font-size:0.85em;width:100%;}

/* ========= Photo post ========= */

.photo-post{z-index:3;margin-top:-40px;z-index:3;position:relative;}
.photo-img img{width:100%;height:auto;}
.photo-img {width:100%;display:inline-block;}
.photo-caption {display:none;overflow:scroll;font-family:"Open Sans";}
.photo-caption-show {width: 100%;height: 100%;background: rgba(0,0,0,.5);position: absolute;top: 0;left: 0;display: inline-block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 15% 10%;background-repeat: no-repeat;background-position: center center;}

.photo-img img {vertical-align:top;}
.photo-caption p{font-family:"Open Sans";color:#eee;}

HTML + JS

<div id="wrap">
<div id="header"><i style="color:#fff; float:right;" id="trigger-overlay" class="fa fa-plus-square-o" aria-hidden="true"></i>

<H1><a href="{BlogURL}">The website</a></H1>
<H2>This is the website baseline</H2>

</div>   <!--CLOSES HEADER -->

<!-- {Block:Posts} -->

<!-- ========= Photo post ========= -->
<div class="a-post" >
    <div class="photo-post" onclick="toggleShow()">
        <div class="photo-img"><img src="http://i.imgur.com/F3ZTcM9.jpg" alt="the alternative text" />
            <div class="photo-caption">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>   
            </div><!-- / photo-caption -->
        </div><!-- / photo-img -->

    </div><!-- / photo-post -->
</div><!-- /a post -->

<!-- ========= / Photo post ========= -->

<!-- ========= Text post ========= -->
<div class="a-post">
<div class="text-post">
<div class="text-title"><H2><a href="">This the title of a post</a></H2></div>
<div class="text-date"><em>July 29, 2013</em></div>
<div class="text-body">
<p>Duo an novum impetus scribentur, ius velit aliquando ut. Usu congue commodo delenit ne, pri in perfecto tractatos necessitatibus. Facete perpetua neglegentur nec ei, mei ei affert philosophia. Iisque constituam vel ne.</p>
</div>  
</div>
</div><!-- /a post -->
<!-- ========= / Text post ========= -->

<!-- ========= Photo post ========= -->
<div class="a-post" >
    <div class="photo-post" onclick="toggleShow()">
        <div class="photo-img"><img src="http://i.imgur.com/3thF01e.jpg" alt="the alternative text" />
            <div class="photo-caption">

                    <H2> This is the photo title with a H2</H2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


            </div><!-- / photo-caption -->
        </div><!-- / photo-img -->

    </div><!-- / photo-post -->
</div><!-- /a post -->
<!-- ========= / Photo post ========= -->

<script>
var toggleShow = function(){
    var element = document.querySelector(".photo-caption");
    element.classList.toggle("photo-caption-show");
}</script>
</div><!--CLOSES WRAP -->

在选定的博客帖子类型（Tumblr）上运行此JS

0 个答案: