1

クラスの使用を否定する、私が書いたスクリプトを削除したいと思いUiUx3DSSVFlowます。
この内部クラスをハードコーディングせずに、親を利用するにはどうすればよい#thumbsですか？

スクリプト内の特定のクラスをこれ以上利用するべきではありません。将来、これらのクラスは他のクラス名に変更される可能性があります。内部クラス名を使用せずに、別の方法で同じ機能が必要です

HTML：

<!--Thumbs Image-->

<div id="thumbs">
    <div class="UiUx3DSSVFlow">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>
    <div class="UiUx3DSSVFlow">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>        
    <div id="Video" class="UiUx3DSSVFlow">
        <div class="video_gallery">     
           <div>
                <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
           </div>
         </div>
    </div>       
    <div id="Video" class="UiUx3DSSVFlow">
        <div class="video_gallery">     
            <div>
                <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
            </div>
        </div>
    </div>    
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>

CSS：

#thumbs{
    border:1px solid red;
    width:100%;  
}   
#thumbs div{display:inline-block;   }    
#larger{
    border:1px solid black;
    width:100%;
}    
#larger div{display:inline-block;  }

jQuery：

function thumbs(i,incr){
    var num_thumbs=2;
    if(i===null){
        i=$("#thumbs").prop('data-index'),
        i+=num_thumbs*incr;
    }
    i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
    $("#thumbs").prop('data-index',i);
    $('#thumbs .UiUx3DSSVFlow').hide();
    $('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}

$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
    var that=this;
    $('.t'+that[0]).click(function(){
        thumbs(null,that[1]);
    });

});
$('.tprev').click();

http://jsfiddle.net/T657N/33/

4

1 に答える 1

0

jsFiddleデモ

JSにジャンプする前に、HTML、CSSの知識を確認してください。

  • 1つのドキュメント内に複数のIDを含めることはできません。
  • 要素（div デフォルトではブロックwidth:100%要素であるため）は;を必要としません。
  • display: inline-block要素にはxbrowserが最適<span>です。他のブラウザでは、次のようなある種のhaxを使用する必要があります。

display：inline-block; * display：inline; ズーム：1;

HTML：

<div id="thumbs">
    <div>
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>
    <div>     
        <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
        <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
    </div>
</div>

<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>

CSS：

#thumbs{border:1px solid red;}
#thumbs div{display:inline;}

jQuery：

var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;

function display(){
    c= c===-1? tDivsN-1 : c%tDivsN;
    $tDiv.hide().eq(c).show();
}
display();

$('.tprev, .tnext').on('click',function(e){
    e.preventDefault();
    var myCLass= $(this).hasClass('tnext') ? c++ : c--;
    display();
});
于 2012-09-17T11:17:13.693 に答える