Question

我正在使用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的值更改为＆gt; 1，我可以使用什么方法来隐藏。一天和节目。超过一天？

像这样：

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

希望你能帮忙！

微米。

Answer 1

已更新，以包含新要求。

您可以尝试使用以下内容：

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

Example JsFiddle Here

Answer 2

试试这个：

$( "#from" ).datepicker({
    onSelect: function( selectedDate ) {
      here is your hide and 
    }
});

Answer 3

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

DEMO

使用jQuery根据另一个元素的内容显示/隐藏div

3 个答案: