2

私は、非常に単純なギャラリーとして、最初の自作の jQuery スクリプトを作成しようとしています。

CSS:

#gallery li{
        display:none;
    }

    #gallery li.current {
        display: block;
    }

HTML:

<div id="gallery">
    <li class="current"><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
</div>
<div id="controls">
    <span id="left">&#60;</span>
    <span id="right">&#62;</span>
</div>

Jクエリ:

$(function(){
    $('#controls #left').click(function(){
        var old = $('li.current');
        $('li.current').removeClass('current');
        if (old = $('#gallery:first-child')){
            $('#gallery:last-child').addClass('current');
        }else{
        $(old).prev('li').addClass('current');
        }
    });
    $('#controls #right').click(function(){
        var old = $('li.current');
        if (old = $('#gallery:last-child')){
            $('#gallery:first-child').addClass('current');
        }else{
        $('li.current').removeClass('current');
        $(old).next('li').addClass('current');
        }
    });
});

最初/最後のギャラリー画像を見ているかどうかを確認するために if/else ステートメントを追加するまではうまくいきました。ギャラリーがループするように、このステートメントが必要です。なぜそれが機能しないのか理解できず、デバッグしても何も得られません。

正しい方向に少しプッシュできますか？

編集：以下のいくつかの提案を使用して、ここに私がいるところです：

$(function(){
    $('#left').click(function(){
        var old = $('li.current');
        old.removeClass('current');
        if (old == $('#gallery li:first-child')){
            $('#gallery li:last-child').addClass('current');
        }else{
        old.prev('li').addClass('current');
        }
    });
    $('#right').click(function(){
        var old = $('li.current');
        old.removeClass('current');
        if (old == $('#gallery li:last-child')){
            $('#gallery li:first-child').addClass('current');
        }else{      
        old.next('li').addClass('current');
        }
    });
});

ただし、まだループしていません（最初の画像で「左」を押すとギャラリーが空白になり、最後の画像で「右」を押すと同様です）

4

3 に答える 3

1

あなたは使用したいかもしれません==：

if (old == $('#gallery:first-child')){

と

if (old == $('#gallery:last-child')){

Jackが指摘したように、それらは同じ要素を選択して同様の jQuery オブジェクトを返す可能性のある個別の jQuery 呼び出しであるため、とにかく機能しませんが、DOM 要素の個別のコレクションであるため、比較では機能しません。 . 正しい方法は、.is私が以下に提供するように使用することです...または以下と比較することです：

if (old[0] == $('#gallery:first-child')[0]){

このようにインデックスを作成すると、選択したセットの最初の項目 (実際の DOM 要素) が取得され、比較できます。おそらく好まれませんが、間違っていません。

これが正しいことを証明する例を次に示します: http://jsfiddle.net/4adSj/

あなたはまた、いくつかの奇妙なことをしています。このセレクターを使用する必要はありません: $('#controls #right')-$('#right')は、使用方法のおかげで十分にユニークidです。

また、保存var old = $('li.current');してから、わざわざ使用しない次の行old- のように再取得します$('li.current')。

また、要素を、、またはにのみネストする必要があるときに、<li>要素を にネストしています。<div><ul><ol><menu>

もう 1 つ - 変数は jQuery オブジェクトであるため、変数を宣言した後にアクセスするたびoldに行う必要はありません。$(old)を使用するだけold.jQueryMethod()です。

if最後に、他の問題は、ステートメントのセレクターです。

$('#gallery:last-child')

id「ギャラリー」を持ち、最後の子である要素を見つけることを意味します。あなたはおそらく欲しい：

$('#gallery > li:last-child')

つまり、「gallery」liを持つ親要素の最後の子要素である子要素を見つけます。id

したがって、使用する最終的なコードの私の提案は次のとおりです。

$(function(){
    $('#left').on("click", function () {
        var old = $('li.current');
        old.removeClass('current');
        if (old.is(':first-child')){
            $('#gallery > li:last-child').addClass('current');
        } else {
            old.prev('li').addClass('current');
        }
    });

    $('#right').on("click", function () {
        var old = $('li.current');
        old.removeClass('current');
        if (old.is(':last-child')){
            $('#gallery > li:first-child').addClass('current');
        } else {
            old.next('li').addClass('current');
        }
    });
});
于 2012-12-11T02:16:04.950 に答える
0

jsBin デモ

var c = 0; 
var imgN = $('#gallery li').length; // 4   
$('#left, #right').click(function(){
  c = this.id=='right' ? ++c : --c ;
  $('#gallery li').hide().eq( c%imgN ).show(); 
});

あるいは：

var c = 0; 
$('#left, #right').click(function(){
  $('#gallery li').hide().eq( (this.id=='right'?++c:--c) % 4 ).show(); 
});

ギャラリーデモ

PS:代わりに.hide()使用でき.removeClass('current')
、代わりに.show()使用できます.addClass('current')

于 2012-12-11T02:34:59.760 に答える
0

とを使用.is(':first-child)し.is(':last-child')て、何かが最初または最後の子であるかどうかをそれぞれ調べることができます。

$('#controls #left').click(function() {
    var old = $('li.current')
        .removeClass('current');

    if (old.is(':first-child')) {
        // search the siblings for the last child
        old.siblings(':last-child').addClass('current');
    } else {
        $(old).prev('li').addClass('current');
    }
});

$('#controls #right').click(function() {
    var old = $('li.current')
        .removeClass('current');

    if (old.is(':last-child')) {
        old.siblings(':first-child').addClass('current');
    } else {
        $(old).next('li').addClass('current');
    }
});

ところで、HTML を次のように変更します。

<div id="controls">
    <span class="left">&#60;</span>
    <span class="right">&#62;</span>
</div>

そして、 と を使用$('#controls .left')し$('#controls .right')て、クリック可能な要素をターゲットにします。

編集

より洗練されたアプローチは、次のようになります。

// wrap the functionality inside an anonymous function
// localizing the gallery and controls blocks
(function($gallery, $controls) {
    var pos = 0;

    // this function performs the actual move left and right, based on event data being passed in via evt.data.delta
    function move(evt) {
        var $items = $gallery.children(), // if the gallery never changes size you should cache this value
        max = $items.length;

        $items.eq(pos).removeClass('current');
        pos = (pos + evt.data.delta) % max; // update the position
        $items.eq(pos).addClass('current');
    }

    // attach the controls
    $controls
        .on('click', '.left', {
            delta: -1 // left decreases the position
        }, move)
        .on('click', '.right', {
            delta: 1 // right increases the position
        }, move);

    // make sure the first is always selected
    $gallery.children().removeClass('current').eq(pos).addClass('current');

}($('#gallery'), $('#controls')));​​​​​​​​​ // immediate invocation
于 2012-12-11T02:21:10.393 に答える