優化長按事件

Question

我有下面的代碼，它可以改變點擊某個元素的文本，具體取決於事件觸發時元素中存在的文本值。

http://jsfiddle.net/TNDhL/

$('#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(); 
});