鏈接<i>標籤如何同時更改文字onclick？

Question

這裏就是我有這麼遠：

$(document).ready(function() { 

$('.alt').click(function() { 
    var index = $(this).attr("data-text-index"); 
    var text = $.parseJSON($(this).attr("data-text")); 
    if (index == null) index = -1; 
    index = Number(index) + 1 >= text.length ? 0 : Number(index) + 1; 
    $(this).html(text[index]); 
    $(this).attr("data-text-index", index); 
}); 

$('.alt').click(); 

}); 

示例HTML：

I <i class="alt" id="text1a" data-text='["like","love","am fond of"]'></i> <i class="alt" id="text1b" data-text='["her","you"]'></i>, but I don't know <i class="alt" id="text2" data-text='["him","you"]'></i>. 

我需要爲類「ALT」 onload事件中的所有元素運行的功能，使每個第一文本填充在其數據索引中。然後，當點擊第一或第二I標記（ID =「text1a」或「text1b」），我想既週期在它們的數據文本組的下一個文本，而第三i標籤（ID =「text2」中）獨立運作。換句話說，所有在其ID中具有相同初始字符的標籤（例如「text1」）應該以這種方式鏈接。

注意，可能有許多幾十條這樣的線，從而幾十個這樣的標籤。另外，替代文本的數量可能因標籤而異，如上面修改後的第一個標籤。

而且，我怎麼能存儲在緩存中的每個元素的當前文本，讓誰返回頁面的用戶仍然可以看到文本的個性化又在哪裏？

提前很多感謝， 布拉德

Answer 1

我改變的ID是唯一的。我還更改了alt屬性以區分最後一個元素。

http://jsfiddle.net/H2yeR/

I <i class="alt1" id="text0" data-text='["like","love"]'>like</i> <i class="alt1" id="text1" data-text='["her","you"]'>her</i>, but I don't know <i class="alt2" id="text2" data-text='["him","you"]'>him</i>. 

$('.alt1').click(function() { 
    $('.alt1').each(function(i,e){ 
     swapText($(e)); 
    }); 
}); 
$('.alt2').click(function() { 
    swapText($(this)); 
}); 

function swapText(alt) { 
    var texts = alt.data('text'); 
    var current_text = alt.text(); 
    if(current_text==texts[0]) { 
     alt.text(texts[1]); 
    } else { 
     alt.text(texts[0]); 
    } 
} 

編輯

我寫了 「萬能」 的劇本。我爲每個元素使用2個類名：alt和text，其中是組號。

http://jsfiddle.net/mattydsw/H2yeR/2/

$('.alt').click(function() { 
    var className = $(this).attr("class"); 
    className = className.split(' '); 
    className = className[1]; 
    $('.alt.'+className).each(function(i,e){ 
     swapText($(e)); 
    }); 
}); 

function swapText(alt) { 
    var texts = alt.data('text'); 
    var currentText = alt.text(); 
    var currentIdx = alt.data('i'); 
    if(currentIdx==undefined) { 
     currentIdx = 0; 
    } 
    currentIdx = (currentIdx+1) % texts.length; 
    alt.data('i',currentIdx); 
    alt.text(texts[currentIdx]); 
}