javascript - 当按下下一个和上一个按钮时，如何使用 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