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

我正在使用jQueryUI日期选择器来计算所选天数。默认值为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>

1
你要呆一天
你要呆一天以上

如果.dates的值更改为>1，我可以使用什么方法隐藏.one-day并显示.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>

2
你要呆一天
你要呆一天以上

希望你能帮忙

---

M.

更新以包括新的要求

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

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

试试这个：

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

1
2.
你要呆一天
你要呆一天以上
//  

---

嘿，这很好，但是如果用户随后更改日期范围，div也会更新吗？当然，我会更新小提琴并更新我的答案，您只需连接到skparwal概述的日期选择器的onSelect事件

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