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

HTML出力が出力HTMLと一致するように、 jsfiddleを更新しました。

<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 に答える