Question

我有以下代码，根据事件被触发时元素中存在的文本值，更改单击元素中的文本。

$('#left').on('click', function (){
if ($("#textContainer:contains('something')").length) {
    $('#textContainer').text('third text replacement');
    $('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
    $('#textContainer').text('now the next item');
    $('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
    $('#textContainer').text('new text here');
    $('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
    $('#textContainer').text('something');
    $('.elsewhere').text('text here');
}
});

$('#right').on('click', function (){
if ($("#textContainer:contains('something')").length) {
    $('#textContainer').text('new text here');
    $('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
    $('#textContainer').text('now the next item');
    $('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
    $('#textContainer').text('third text replacement');
    $('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
    $('#textContainer').text('something');
    $('.elsewhere').text('text here');
}
});

请查看以上小提琴的工作版本。

我想找到一种方法，使其更容易管理，以便更容易扩展。有没有更好的方法来处理这种情况？将其压缩为函数并使用变量来存储#textContainer的值将更为理想。有什么建议吗？

Answer 1

看起来像一个完美的封闭装置，可以用一个简单的计数器跟踪你的进度..可能看起来像这样：

var myTextRotator = (function () {
    var myPhraseArray = ["first phrase", "second phrase"],
        counter = 0;
    return {
       clickLeft: function () {
           counter -= 1;
           return myPhraseArray[counter]; //return array item or do your processing here
       },
       clickRight: function () {
           counter += 1;
           return myPhraseArray[counter]; //return array item or do your processing here
       }
    };
}());

将clickLeft和clickRight方法绑定到jQuery .on()。可能必须在那里添加条件，因此计数器不会低于0或高于数组长度。

您可以使用它：

$(".left").on("click", function () {
    myTextRotator.clickLeft();
});

$(".right").on("click", function () {
    myTextRotator.clickRight();
});

优化点击事件的长期

1 个答案: