1

ここで助けが必要です。私は自分のコンテンツスライダーに自分のコードを書かせようとしていますが、これを理解できないようです。私は新しく、これらすべてを学んでいるので、どんな助けもいただければ幸いです。私がやろうとしているのは、ユーザーが[次へ]をクリックすると、現在のスライドが非表示になり、次のスライドが表示されることです。グローバル変数を使用してこれを実行しようとしていますが、関数内から更新されているグローバル変数を維持する方法がわかりません。ここにいくつかのコードがあります、私は私の説明があまり良くないことを知っています。

$(function () {


    var i = '';

    $('.next').click(function() {
        $('.slide' + i).hide();
        i++;
        console.log(i);
        if(i <= 4) {
        $('.slide' + i).show();
        }
        else {
        var i = 1;
        $('.slide' + i).show();
        i++;
        console.log(i);
        }
    });

});

とマークアップ

<div class="outerWrapper wrapperWidthHeight">
    <div class="innerWrapper wrapperWidthHeight slide1">
    1
    </div>
    <div class="innerWrapper wrapperWidthHeight slide2">
    2
    </div>
    <div class="innerWrapper wrapperWidthHeight slide3">
    3
    </div>
    <div class="innerWrapper wrapperWidthHeight slide4">
    4
    </div>
</div>
<div class="next">NEXT</div>

とCSS

.wrapperWidthHeight {
    margin:auto;
    width:900px;
    height:600px;
    }

.outerWrapper {
    overflow:hidden;
    position:relative;
    margin-top:10px;
    border:1px solid black;
    border-radius:15px;
    box-shadow: 2px 2px 5px 5px #888;
    }

.innerWrapper {
    position:absolute;
    text-align:center;
    padding:0;
    margin:auto;
    }


.slide1 {
    display:block;
    }

.slide2, .slide3, .slide4 {
    display:none;
    }

.next{
    display:block;
    margin:auto;
    }
4

3 に答える 3

1 
$(function () {

    var i = 1;   // should be a number
    // this var IS NOT global, nut it is available to
    // the scope of the anonymous function

    $('.next').click(function() {
        // accessing i here is only accessing via
        // the scope chain, i isn't "global" this way

        $('.slide' + i).hide();
        i++;
        console.log(i);

        if(i > 4) {
           i = 1;  // DON'T write "var" here, doing so
                   // defines a NEW local variable i in the local scope
        }

        $('.slide' + i).show();
        // you don't need to increment i here,
        // it's already incremented by setting from 4+ to 1
        console.log(i);
    });
});​
于 2012-10-26T20:27:58.387 に答える
1

あなたが私のためにそれを機能させたものにほんの2、3の微調整：

$(document).ready(function () {

    var i = 1;

    $('.next').click(function () {
        $('.slide' + i).hide();
        i++;
        console.log(i);
        if (i <= 4) {
            $('.slide' + i).show();
        }
        else {
            i = 1;
            $('.slide' + i).show();
            console.log(i);
        }
    });

});
于 2012-10-26T20:22:08.983 に答える
0

関数の外部で、ウィンドウオブジェクトのメンバーとしてグローバル変数を作成してみてください。関数のすぐ外に、次のようなものを配置できます。

window.i = 0;

インクリメントする場合は、空の文字列ではなく、おそらくゼロに初期化する必要があります。問題が発生するとは言っていませんが、それは良い習慣です。

于 2012-10-26T20:19:18.907 に答える