Question

我们正在构建一个响应式网站，其中包含带有滑动内容的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和类？

非常感谢任何帮助

如果有帮助，可以张贴小提琴。

Answer 1

将每个$(document).ready()中的所有内容移动到一个$(document).ready()块中。使用多重选择器选择所有不同的元素而不是7。

将此jquery压缩到一个脚本

1 个答案: