0

カレンダー アプリでは、対応する月の値が 0 ～ 11 のオプション タグを持つ単純な選択があります。月を一方向 (12 月から 1 月) に循環させることはできますが、逆方向には機能させることができません。2月と12月のみ表示されます。

これは、私がすでに行ったことを示すjsfiddleです。

HTMLは次のとおりです。

<select id="MonthName" class="form-control">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <!-- etc, through 11 -->
</select>

<!-- 'Buttons' -->
<span class="chevron chevronLeft floatLeft">◀</span>
<span class="theMonth">Month</span>
<span class="chevron chevronRight floatRight">▶&lt;/span>

jQuery は次のとおりです。

$('.chevron').on('click', function() {
  // This if works perfectly, and will reset to 11 once the selectedMonth is 0
  if ($(this).hasClass('chevronLeft')) {
    var selectedMonth = $('#MonthName').val();
    (selectedMonth != 0) 
      ? $('#MonthName').val(selectedMonth - 1).trigger('change')
      : $('#MonthName').val(11).trigger('change');
  }

  else {
    // This doesn't work, I tried declaring the variable locally, 
    // different less/greater than expressions, but nothing works
    var selectedMonth = $('#MonthName').val();
    (selectedMonth !== 11)
      ? $('#MonthName').val(selectedMonth + 1).trigger('change')
      : $('#MonthName').val(0).trigger('change');
  }
});

$('#MonthName').on('change', function() {
   var monthText = 
    $('#MonthName option:selected').text();
    $('.theMonth').text(monthText);
});
4

3 に答える 3

2

変化する：

var selectedMonth = $('#MonthName').val();

に：

var selectedMonth = parseInt($('#MonthName').val(), 10);

selectedMonth + 1文字列だったので、整数の加算ではなく文字列の連結を行っていselectedMonthました。

フィドル

また、幅を指定することをお勧めしますtheMonth-- 右矢印をクリックするのは、月が変わると移動し続けるため難しいです。

于 2013-10-09T17:58:57.680 に答える