2

選択した日数を計算する jQuery UI 日付ピッカーを使用しています。デフォルト値は 1 です。選択した日数によって異なる div を表示したいと考えています。

<div class="dates">1</day>

<div class="one-day" style="display:block;">You are staying for one day</div>

<div class="more-than-one-day" style="display:none;">You are staying for more than one day</div>

.dates の値が > 1 に変化した場合、.one-day を非表示にして .more-than-one-day を表示するには、どの方法を使用できますか?

このような：

<div class="dates">2</day>

<div class="one-day" style="display:none;">You are staying for one day</div>

<div class="more-than-one-day" style="display:block;">You are staying for more than one day</div>

あなたが助けてくれることを願っています!

M.

4

3 に答える 3

3

新しい要件を含めるために更新されました。

次のようなものを使用してみてください。

var datesFunction = function () {
    var numDays = $('.dates').html();
    if (numDays == 1) {
        $('.more-than-one-day').hide();
        $('.one-day').show();
    } else if (numDays > 1) {
        $('.one-day').hide();
        $('.more-than-one-day').show();
    } else {
        //Default, maybe hide both?
        $('.one-day').hide();
        $('.more-than-one-day').hide();
    }
};

$(document).ready(function () {

    var dateDiff = function(selectedDate) {
          var fromDate = $('#from-date').datepicker('getDate');
          var toDate = $('#to-date').datepicker('getDate');
          var dateDifference = 0;
          if (fromDate && toDate) {
                dateDifference = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);
          }
          $('.dates').text(dateDifference);
          datesFunction();
    };

    $('#from-date').datepicker({ 
        onSelect: dateDiff
    });
    $('#to-date').datepicker({
        onSelect: dateDiff
    });
});

JsFiddle の例

于 2013-06-18T04:21:54.610 に答える
0

これを試してみてください：

$( "#from" ).datepicker({
    onSelect: function( selectedDate ) {
      here is your hide and 
    }
});
于 2013-06-18T04:25:23.500 に答える
0 
<div class="dates">1</div>
<div class="dates">2</div>

<div class="one-day" style="display:block;">You are staying for one day</div>    
<div class="more-than-one-day" style="display:none;">You are staying for more than one day</div>

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.dates').click(function(){
    alert($(this).html());
    if($(this).html()=='1')
    {

        $('.one-day').show();
        $('.more-than-one-day').hide();
    }
    else
    {
        $('.one-day').hide();
        $('.more-than-one-day').show();
    }
});
});//]]>  

</script>

デモ

于 2013-06-18T04:28:58.967 に答える