Question

这让我头晕了一下。

我正在尝试动态创建滑块项。始终至少有一张幻灯片，因此我已在#portfolio-slide-1中添加到代码中以表示第一张幻灯片。

当用户点击投资组合中的特定项目时，使用jQuery .load()将另一个文件中的数据加载到#portfolio-slide-1中，然后屏幕导航到该元素。

现在接下来，我需要为任何其他幻灯片做同样的事情。例如，如果此特定投资组合项目共有3张幻灯片，那么我需要再创建两张幻灯片。这是默认的#portfolio-slide-1加#portfolio-slide-2和#portfolio-slide-3。然后我需要将.load()内容放入那些滑块中，以便它坐在那里等待观看。

以下是将数据加载到#portfolio-slide-1（始终存在）

的代码

HTML

<div class="grid half portfolio-item" id="dorking-brewery" data-number-slides="2">
<div class="slide" id="portfolio-slide-1"></div>

的jQuery

$('.portfolio-item').click(function(){
        var portfolioItem = $(this).attr('id'); // dorking-brewery
        $('#portfolio-slide-1').load('pages/'+portfolioItem+'-1.php', function( {}); // loads the content from pages/dorking-brewery-1.php into the slide
        $('#portfolio-slide-1').addClass(portfolioItem); // adds a specific classname like dorking-brewery
        $('#portfolio-slide-1').addClass(portfolioItem+'-1'); // adds a specific classname like dorking-brewery-1
        $.fn.fullpage.moveSlideRight(); // animates the slider to slide right.
    });

一切正常。

但是现在我需要创建那些额外的幻灯片。我在此示例中为可点击项data-number-slides="2"添加了数据属性。因此，此投资组合项目需要默认幻灯片，还需要一个额外的幻灯片。

我现在需要创建#portfolio-slide-2

所以我提取了data个幻灯片的数量：

var numberSlides = $(this).data('number-slides');

然后我检查幻灯片的数量是否超过1，它是，所以我需要创建额外的东西：

if(numberSlides > 1){...};

现在这就是我被困的地方。我需要编写一个循环来创建所需的额外幻灯片。所以在这种情况下numberSlides = 2所以只需要一个额外的。但是如果numberSlides = 4则需要创建3等等。必须在 #portfolio-slider-1之后添加，然后填充正确的文件信息。

如何编写一个循环，根据numberSlides的值创建额外数量的幻灯片？我得到了这么远，但后来我卡住了：

未完成的代码：

if(numberSlides > 1){ console.log('creating '+numberSlides+' extra slides'); // If more than 1, create the extra slides required counter = 2; counterMax = numberSlides; if (counter <= counterMax){ // make it loop? // something here? } }

Answer 1

您需要使用for循环。在这种情况下，它看起来像这样：

for(var i=1; i<numberSlides; i++){
  //append slide
}

for循环的第一个语句定义了要迭代的变量。由于您已经有一个滑块，因此该值为1而不是0.第二个语句是对循环完成时的测试。只要i小于所需幻灯片的数量，它就会附加幻灯片。最后，每次循环执行语句时，i++递增i。

因此，将slideNumber设置为4会将代码循环3次，直至4<4 == false。

Javascript循环创建多个div相互追加

HTML

的jQuery

未完成的代码：

1 个答案: