Question

$(".item_1").click(function(){  
  var i =1;
  if (i<=3){
    $("#slideshowWindow").wrapInner('<div class="slides" />');
    $('<img src="Content_Slide1/'+i+'.png" height="100%" width="100%"/>').appendTo($(".slides"));
    i++
}

有谁能告诉我我的代码有什么问题？我想要的是我的HTML变为：

<div id="slideshowWindow"> 
  <img id="Slide_image1" src="Content_Slide1/1.png" height="100%" width="100%" />
</div>
<div class="slide">
  <img id="Slide_image2" src="Content_Slide1/2.png" height="100%" width="100%"/> 
</div>
<div class="slide">
  <img id="Slide_image3" src="Content_Slide1/3.png" height="100%" width="100%"/> 
</div>

如果我把html代码与下面相同，那么幻灯片放映就可以了!!然后，我删除了所有div幻灯片类。使用我上面使用的Jquery代码，尝试按照单击项目更改幻灯片图像组。

你知道我做错了什么吗？

<div class="Main" style="background-image:url(images/bg.jpg)">
  <div class="slide"><img></div>
  <div class="slide"><img></div>
  <div class="slide"><img></div>
</div><!--/slideshowWindow-->

Answer 1

$(".item_1").click(function(){  
  var i;
  for (i = 1; i <= 3; i += 1) {
    $("#slideshowWindow").wrapInner('<div class="slides" />');
    $('<img src="Content_Slide1/' + i + '.png" height="100%" width="100%"/>')
      .append($(".slides"));
  }
});

这可能是你的目标。（未经测试）

修改

我在编辑后制作了我认为你想要的jsfiddle。我在jQuery中使用了appendTo方法。

编辑2

我已更新jsfiddle，因此html输出将与您的输出html匹配。

<div class="Main"> <div class="slide"><img src="//lorempixel.com/400/400/abstract/1/" height="100%" width="100%"></div> <div class="slide"><img src="//lorempixel.com/400/400/abstract/2/" height="100%" width="100%"></div> <div class="slide"><img src="//lorempixel.com/400/400/abstract/3/" height="100%" width="100%"></div> </div>

注意：我刚刚添加了一些文字到我要添加的html中。

请阅读您正在使用的工具：jQuery，js

Jquery点击内容幻灯片图片更改

1 个答案: