Javascript 不影响所选类的所有元素

Question

我正在尝试运行一个幻灯片脚本，该脚本在具有 .featured 类的所有元素上运行，但它仅在具有标注类的最后一个对象上运行。看起来幻灯片正在加载每个 div 的图像，但将它们加载到同一个 div 中。这是我的脚本:

var images=new Array('http://lorempixel.com/1000/600','http://lorempixel.com/1000/800','http://lorempixel.com/1000/660');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
   if($('.slideshowimage').length!=0)
   {
       $('.slideshowimage').fadeOut(300,function(){slideshowFadeIn();$(this).remove()});
   }
   else
   {
       slideshowFadeIn();
   }
}
function slideshowFadeIn()
{
   $('.featured').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(300,function(){setTimeout(doSlideshow,6000);}));
   if(nextimage>=images.length)
       nextimage=0;
}

.tile {
	background-color: rgba(255,255,255,.7);
	color: rgba(110,185,43,100);
	margin-top:10em;
	min-height: 5em;
	padding: 0;
}

#main .container {
	position: relative;
	z-index: 300;
	padding-top:2em;
	padding-bottom:2em;
}

.window{
	height:40em;
}

.typer p {
	color:#888;
}

.typer a{
	color: rgba (55,158,196,100);
	text-decoration: none;
}

.typer a:hover {
	text-decoration: none;
	opacity: .8;
	transition: all 300ms;
}

.typer h1 {
	font-size: 5.5em;
	margin-bottom:1em;: 
}

.typer h3 {
	color: rgba(55,158,196,100);
	margin-bottom: .5em;
	margin-top: .7em;
	font-size: 1.4em;
}
.typer textarea {
	background-color: transparent;
	border: none;
	width: 80%;
	height: 7em;
	color: #888;
}

.typer textarea:focus {
	box-shadow: rgba(110,185,43,100) 0px 0px 20px;
	border: none;
	outline: none;
}

.typer button {
	color:#FFF;
	background-color: rgba(55,158,196,100);
	border: none;
	padding: .8em;
	margin-top:.5em;
}

.typer button h1 {
	font-size: 1em;
	letter-spacing: .1em;
	margin: 0;

}

.featured {
	position: relative;
	padding:0;
	color:#FFF;
	overflow: hidden;
}

.featured img {
	position: absolute;
    width: 100%;
}

.feature-blue {
	background-color: rgba(55,158,196,100);
	opacity: .6;
	width: 100%;
	height:100%;
	position: absolute;
	z-index: 100;
}

.featured h1 {
	margin-top: 8em;
	font-family: 'Museo Sans Rounded' sans-serif;
	font-weight: 500;
	font-size: 4em;
}

.featured article {
	margin-top: 2em;
	font-size: 1.5em;
	line-height: 1.7em;
	font-weight: 300;
}

.featured p strong{
	font-size: 1.3em;
	letter-spacing: .09em;
}

.featured button {
	color: rgba(55,158,196,100);
	background-color: #FFFFFF;
	border: none;
	padding: .8em;
	margin-top:2em;
}

.featured button h1 {
	font-size: 1em;
	letter-spacing: .8em;
	margin: 0;

}

<div class="tile col-xs-10 col-xs-offset-1">
            <div class="featured">
                <div class="feature-blue"></div>
                <div class="container">
                    <p><strong>Featured</strong></p>
                    <div class="slide1">
                        <h1>At Home In The World</h1>
                        <article>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test .</article>
                        <button>Read More</button>
                    </div>
                </div>
            </div>
        </div>

<div class="tile col-xs-10 col-xs-offset-1">
            <div class="featured">
                <div class="feature-blue"></div>
                <div class="container">
                    <p><strong>Featured</strong></p>
                    <div class="slide1">
                        <h1>At Home In The World</h1>
                        <article>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test .</article>
                        <button>Read More</button>
                    </div>
                </div>
            </div>
        </div>

Answer 1

首先要做的事情是:您的代码中有一个巨大的错误。即使在添加第一个元素之后，您仍会不断向页面添加新的图像元素。这意味着您的页面将不断膨胀，直到发生内存泄漏。

你在这方面的做法完全错误。您正在使用 Javascript 编辑 DOM，这是网页设计的一大失礼行为，除非您有充分的理由这样做。相反，您应该在 HTML 中创建 2 个图像标签，并使用 Javascript 分配 src 属性值并进行淡入淡出。

我现在太累了，无法调试您的代码并制作一个工作示例。我建议您先自己尝试一下，如果您需要该解决方案的任何帮助，请提出一个新问题。