0

現在、スライド コンテンツ リビールを備えた div のグリッドを使用してレスポンシブ サイトを構築しています。次のスクリプトである程度成功しました。

<script>
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
    if(toggle) {
        $(".inner").stop().animate({left:0},1000);
    } else {
        $(".inner").stop().animate({left:-width},1000);
    }
    toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-two").width();
var toggle = true;
$(".wrapper-two").click(function(){
    if(toggle) {
        $(".inner-two").stop().animate({left:0},1000);
    } else {
        $(".inner-two").stop().animate({left:-width},1000);
    }
    toggle = !toggle;
});
});
</script>

<script>
$(document).ready(function(){
var width = $(".inner-three").width();
var toggle = true;
$(".wrapper-three").click(function(){
    if(toggle) {
        $(".inner-three").stop().animate({left:0},1000);
    } else {
        $(".inner-three").stop().animate({left:-width},1000);
    }
    toggle = !toggle;
});
});
</script>

<script>
$(document).ready(function(){
var width = $(".inner-four").width();
var toggle = true;
$(".wrapper-four").click(function(){
    if(toggle) {
        $(".inner-four").stop().animate({left:0},1000);
    } else {
        $(".inner-four").stop().animate({left:-width},1000);
    }
    toggle = !toggle;
});
});
</script>

<script>
$(document).ready(function(){
var width = $(".inner-five").width();
var toggle = true;
$(".wrapper-five").click(function(){
    if(toggle) {
        $(".inner-five").stop().animate({left:0},1000);
    } else {
        $(".inner-five").stop().animate({left:-width},1000);
    }
    toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-seven").width();
var toggle = true;
$(".wrapper-seven").click(function(){
    if(toggle) {
        $(".inner-seven").stop().animate({left:0},1000);
    } else {
        $(".inner-seven").stop().animate({left:-width},1000);
    }
    toggle = !toggle;
});
});
</script>

ご覧のとおり、私は jquery を十分に理解していないので、実行された方法ではなく、これを記述するためのより良い方法があると確信しています。どういうわけか、いくつかのポインターを提供するか、スクリプトを書き直して、異なる ID とクラスを持つ同じコードの醜い反復リストではなく、配列のようになることを望んでいましたか?

どんな助けでも大歓迎です

それが役立つ場合は、フィドルを投稿できます。

4

1 に答える 1

0

それぞれのすべてを$(document).ready()単一の$(document).ready()ブロックに移動します。複数のセレクターを使用して、7 の代わりにすべての異なる要素を選択します。

于 2013-05-30T00:59:20.893 に答える