0

「1-99」の値が表示されている次のHTMLがあります。

<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)

誰かが私を助けてくれることを願っています。

4

2 に答える 2

1 
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);}
于 2012-06-24T16:14:33.760 に答える
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)});

デモンストレーション

于 2012-06-24T16:18:10.850 に答える