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

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 的值更改为 > 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。

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

示例 JsFiddle 这里

Answer 2

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

演示

Answer 3

试试这个：

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