jquery - タグをリンクしてonclickでテキストを同時に変更する方法は?

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]);
}