jQuery遞增類名和函數

我對JavaScript很新，我從你的社區每天都在學習。但是，我無法找到一個乾淨的解決方案來解決當前的問題。jQuery遞增類名和函數

我有一個幻燈片的第一張幻燈片塊網格，我想每一個鏈接到相應的幻燈片。例如，類名爲「linkSlide3」的圖塊會滑動到「3」。現在，我想避免重複下面的函數，它是做什麼工作的：

$('.linkSlide3').click(function() { 
    $('.slider').mySuperSlider('goTo', 3); 
    return false; 
});

我需要從1遞增到20，我怎麼能寫好聽嗎？

非常感謝您的幫助！ :-)

來源

2013-04-02 Laurent

對於我用數據這樣的情況下的屬性來指代相應的元件：

$('.linkSlide').click(function() { 
    $('.slider').mySuperSlider('goTo', $(this).data('slide')); 
    return false; 
});

而在HTML添加data-slide屬性到各個重複元件：

<a class="linkSlide" data-slide="3">...</a>

這裏是抽象的例子怎麼這樣的結合可以工作：http://jsfiddle.net/rNvKe/

來源

2013-04-02 17:32:22 dfsq

要使用而不必'.linkSlide1'此解決方案，'。 linkSlide2'等，你應該只有一個'.linkSlide'類用於所有元素，並使用'data-attribute'來表示數字。 – dfsq

謝謝soooooo !!有效：-））） – Laurent

而不是命名你的訴權ñ按鈕

.linkSlide1
.linkSlide2
.linkSlide3
.etc ...

你可以做

.linkslide

和確保是因爲您的按鈕，這樣你.linkslide元素將被index從0組織19（20個鍵）的母公司內沒有其他元素。
比去搶單擊按鈕.index()併發送到.superSlider(THAT INDEX!!)。
爲了動畫的滑塊比你可以由一個滑動寬度檢索指數乘法：

LIVE DEMO

的jQuery：

$('.linkSlide, .back').click(function() { 
    var ind = $(this).index()+1; // +1 cause we are already at 0 
    if($(this).hasClass('back')) ind = 0; // go to slide index 0 
    superSlider(ind); 
}); 

function superSlider(ind){ 
    var oneSlideWidth = $('.slide').width(); 
    $('#allSlides').stop().animate({left: -(ind*oneSlideWidth) },700); 
}

HTML ：

<div id="slider"> 
    <div id="allSlides"> 

    <div class="slide"> <!-- index = 0 --> 
     Slide 0 
     <button class="linkSlide">Tile index 1</button> <!-- index = 0, add 1--> 
     <button class="linkSlide">Tile index 2</button> <!-- index = 1, add 1 --> 
     <button class="linkSlide">Tile index 3</button> <!-- index = 2, add 1 --> 
    </div> 

    <div class="slide"> <!-- index = 1 --> 
     Slide 1 
     <button class="back">Back to 0</button>  
    </div> 

    <div class="slide"> <!-- index = 2 --> 
     Slide 2 
     <button class="back">Back to 0</button>  
    </div> 


    <div class="slide"> <!-- index = 3 --> 
     Slide 3 
     <button class="back">Back to 0</button>  
    </div> 

    </div> 
</div>

CSS：

#slider{ 
    position:relative; 
    width:100px; 
    height:95px; 
    background:#eee; 
    text-align:center; 
    overflow:hidden; 
} 
#allSlides{ 
    position:absolute; 
    left:0; 
    width:9999px; 
    height:95px; 
} 

.slide{ 
    position:relative; 
    width:100px; 
    height:95px; 
    float:left; 
}

探索jQuery方法我用：

http://api.jquery.com/click/
http://api.jquery.com/index/
http://api.jquery.com/hasclass/
http://api.jquery.com/width/
http://api.jquery.com/stop/

來源

2013-04-02 17:59:43

這是我在這個網站上的第一個問題，我沒想到有這麼多詳細的答案......太快了！非常感謝大家，爲了您的時間，技巧和善良！

我跟着dfsq答案，它工作得很好:-)

HTML：

<div class="linkSlide" data-slide="1"></div> 
    <div class="linkSlide" data-slide="2"></div> 
    <div class="linkSlide" data-slide="3"></div> 
    etc… until 20

JS：

$('.linkSlide').click(function() { 
    $('.slider').mySuperSlide('goTo', $(this).data('slide')); 
    return false; 
});

來源

2013-04-02 20:35:47 Laurent

jQuery遞增類名和函數

回答

相關問題