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

如何链接<i>标签同时点击更改文本？</i>

1 个答案: