Любой способ сократить код моих же функций? - PullRequest
Новая
       3

Любой способ сократить код моих же функций?

0 голосов
/ 13 мая 2011

У меня на сайте работает много одинаковых функций 

<section class="leilig-right" id="leilig-right-box1"> 

<section class="glwrap x1"> 

<ul class="gallery clearfix">

<div id="navz"> 
<span id="prev" class="prev" style="cursor:pointer;"></span> 
<span id="next" class="next" style="cursor:pointer;"></span> 
</div> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 
<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 



<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>
</ul> 
</section> 
</section>

и и и и ... 

<section class="leilig-right" id="leilig-right-box1"> 

<section class="glwrap x2"> 

<ul class="gallery clearfix">

<div id="navz"> 
<span id="prev" class="prev" style="cursor:pointer;"></span> 
<span id="next" class="next" style="cursor:pointer;"></span> 
</div> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 
<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 



<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>
</ul> 
</section> 
</section>

и моя та же функция тоже 

function scrollToPositionx1(element) {
    if (element !== undefined) {
        $(".x1").scrollTo(element, 800, {
            margin: true
        });
    }
}

$(function() {

    //Create an Array of posts
    var posts = $('.x1 img');
    var position = 0; //Start Position
    var next = $('.x1 #next');
    var prev = $('.x1 #prev').hide();

    //Better performance to use Id selectors than class selectors
    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPositionx1(posts[position += 1]);
        if (position === posts.length - 6) {
            next.hide();
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPositionx1(posts[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
    });

});

и и и и ... 

function scrollToPositionx2(element) {
    if (element !== undefined) {
        $(".x2").scrollTo(element, 800, {
            margin: true
        });
    }
}

$(function() {

    //Create an Array of posts
    var posts = $('.x2 img');
    var position = 0; //Start Position
    var next = $('.x2 #next');
    var prev = $('.x2 #prev').hide();

    //Better performance to use Id selectors than class selectors
    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPositionx2(posts[position += 1]);
        if (position === posts.length - 6) {
            next.hide();
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPositionx2(posts[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
    });

});

это отличается только X1, X2, ... и более

Есть ли способ сократить код моих функций?

Демонстрация в реальном времени: http://jsfiddle.net/G3ERL/

1 Ответ

2 голосов
/ 13 мая 2011

Я думаю, вы должны просто использовать http://jquery.malsup.com/cycle/nest2.html

и просто используйте http://jquery.malsup.com/cycle/ и его без ошибок, и многие другие люди вносят свой вклад в исправление ошибок :)

почти забыл, его всегда можно использовать много раз :) в отличие от ур :)

...