如何在按下下一個和上一個按鈕時使用javascript和jquery更改文本值？

Question

我有以下的HTML與「1-99」看得見的值：

<ul class="controls-buttons question-controls"> 

    <li> 
     <a href="#" title="Previous" id="orderPrevious><img src="/Images/control-double-180.png"></a> 
    </li> 
    <li> 
     <a id="orderRange">1 - 99</a> 
    </li> 

    <li> 
     <a href="#" title="Next" id="orderNext"><img src="/Images/control-double.png"></a> 
    </li>    
</ul> 

有，我可以有orderRange變化，因此改變了這樣的被點擊上一頁和下一頁的鏈接時，一個方法是什麼？理想情況下，我想要某種方式，並不意味着我必須硬編碼很多if和else語句。

   1-99  > 100-199 
1-99  < 100-199 > 200-299 
100-199 < 200-299 > 300-399 
200-299 < 300-399 
etc .. 

一旦改變了我想用來存儲使用本地存儲的值象下面這樣：

var store = window.localStorage; 
    store.setItem('Range', xxx) 

我希望有人能幫助我。

Answer 1

這裏有一個解決方案：

function change(d) { 
    var $field = $('#orderRange'); 
    var nums = $field.text().split('-').map(function(a){return parseInt(a,10)+d*100}); 
    if (nums[0]<0) return; 
    else if (nums[0]==101) nums[0]=100; 
    else if (nums[0]==0) nums[0]=1; 
    $field.html(nums.join(" - ")); 
} 

$('#orderPrevious').click(function(){change(-1)}); 
$('#orderNext').click(function(){change(+1)}); 

Demonstration

Answer 2

function changeRange(delta){ 
    var orderRange=document.getElementById('orderRange'), 
    range=orderRange.innerHTML.split(' - ') 
    range=[parseInt(range[0])+delta,parseInt(range[1])+delta] 
    if(range[0]<0) return 
    orderRange.innerHTML=range.join(' - ') 
    var store = window.localStorage; 
    store.setItem('Range', orderRange.innerHTML) 
} 
document.getElementById('orderNext').onclick=function(){changeRange(100);} 
document.getElementById('orderPrevious').onclick=function(){changeRange(-100);}