1 
$(".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-->
4

1 回答 1

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

于 2012-04-20T04:26:11.150 回答