4

これは単純な問題になると思いますが、私は一日中それを見て、答えを見つけるのに苦労しているので、素晴らしい人々が助けてくれることを願っています。

スライドショーを作成するためにjQueryを使用して独自のjavascript関数を作成しました。使用できる無料のスライドショーがたくさんあることは知っていますが、試したいくつかのスライドショーでは同じページに複数のスライドショーを表示できなかったため、これを行うのはそれほど難しくないはずだと思いました。

このページには、画像を含むこれらのdiv要素が2つあります

<div class="slider">
    <img src="./images/Hashimadisaster.png" alt="" title="Hashima Island" class="alignnone size-full wp-image-842">
    <img src="./images/DSCN3674-1024x767.jpg" alt="" title="Legs glued together" class="alignnone size-large wp-image-834">
    <img src="./images/DSCN3672-768x1024.jpg" alt="" title="The front and rear legs together standing on an Eldar Falcon" class="alignnone size-large wp-image-836">
    <img src="./images/DSCN3671-1024x768.jpg" alt="" title="Left rear leg glued into position and balanced to stand on its own" class="alignnone size-large wp-image-835">
    <img src="./images/conseptiual-drawing-for-titan-base-1024x609.jpg" alt="Conceptual drawing for titan base" title="Conceptual drawing for titan base" class="alignnone size-large wp-image-841">
</div>

とjavascriptコード

1. function slidermethod(){
2.  var HeightOfBox= 400;
3.  var timeoutmilliseconds = 3000;
4.  if($('.slider').length){
5.      $('.slider').each(function(){
6.          $(this).css("position","relative");
7.          $(this).children('img').css("position","absolute").css("top","0").css("left","0");  
8.          if($(this).children('img').length){
9.              if($(this).children(".currentslide").length == 0){
10.                 //alert($(this).children("img").length);
11.                 //alert("1");
12.                 // this seems to occur every time it is called
13.                    $(this).children('img:first').addClass(".currentslide");
14.             }
15.             else{
16.                 if($(this).children('.currentslide').next().length)    {    
17.                     alert("2");
18.                     var nextchild = $(this).children('.currentslide').next();
19.                     $(this).children('img').removeClass('.currentslide');
20.                     $(nextchild).addClass(".currentslide");
21.                 }else{                  
22.                     alert("3");
23.                     $(this).children('img').removeClass('.currentslide');
24.                     $(this).children('img:first').addClass(".currentslide");
25.                 }
26.             }               
27.         }
28.         $(this).children('img').css("height",HeightOfBox + "px");
29.         $(this).css("height",HeightOfBox + "px");           
30.     });
31.     setTimeout("slidermethod();",timeoutmilliseconds); 
32.        // every 3 seconds call this method
33. }   
34.}
35.slidermethod(); // call the method

コードはエラーなしで実行され、すべての画像を取得してサイズを変更し、重ねて配置します。z-index：2として.currentslideを持つcssスタイルシートがあります。他のすべての画像は1ですが、コードの最後に到達すると、3秒後に同じメソッドを再度呼び出すsettimeout（）がありますが、常にifステートメントに入っているようです。 

9.    if($(this).children(".currentslide").length == 0){

しかし、ファイアバグを実行すると、画像グループの最初の画像に「currentslide」のクラスがあることがわかります。したがって、これは0ではないはずです。なぜこれが期待どおりに機能しないのかよくわかりません。

4

2 に答える 2

4

ここに間違いがあります

.addClass(".currentslide")

する必要があります

.addClass("currentslide")

すべてのaddclass/removeclassで、同じ間違いをしました

プラグインを開始するためのより良いパス

$.fn.extend({

    slider : function() {
       $(this).each(function() {
           var $sldr=$(this);

            $sldr.css("position","relative")
                 .find("img").css("position","absolute").css("top","0").css("left","0").end()
                 .find("img:first-child").addClass("currentslide").end()

                .on("nextslide",function() {
                        var $current = $sldr.find(".currentslide").removeClass("currentslide")
                        if ($current.next().get(0)) $current.next().addClass("currentslide") 
                        else    $sldr.find("img:first-child").addClass("currentslide")

                  });        
                 setTimeout(function(){$sldr.trigger("nextslide"),3000 });
        });
   return this;
   }
});
   $(".slider").slider();

編集してコードをコピーしたことを追加しますが、これらのcssプロパティをcssファイルに移動する必要があります。プラグインで設定する必要がないため、次のようになります。

$sldr.on("nextslide",function() {
                        var $current = $sldr.find(".currentslide").removeClass("currentslide")
                        if ($current.next().get(0)) $current.next().addClass("currentslide") 
                        else    $sldr.find("img:first-child").addClass("currentslide")

                  }).find("img:first-child").addClass("currentslide");
于 2013-01-10T13:10:10.443 に答える
2

チェックが失敗する理由は、.children（）が0を返しているためです。

代わりに次のようなことをしてください：

if($('.slider img').hasClass('currentslide').length < 1){ /*your code*/ }

私はミカクンに同意します。$（this）を呼び出すことで、DOMに頻繁に飛び込むことができます。$（'。slider'）を変数に設定し、必要な場所で変数を使用します。

于 2013-01-10T13:06:46.370 に答える