Javascript 使用jquery动态调用现有div

我对jQuery非常陌生，我似乎无法理解这一点

我想让用户输入天数，至少1天，最多4天。 因此，如果输入“3”，则显示为： 第一天 第2天 第3天

我不知道如何使这些可以单击，因此如果单击第2天，将显示div id day2的内容，如果他们在第3天单击，第2天将消失，第3天的内容将显示

我要显示的现有div，以及从用户那里获取输入以了解要显示多少天：

$（窗口）.load（函数（）{
$（'form'）。提交（函数（）{
$（“#天”）.empty（）；
var inputNumber=$（'#inputNumber'）.val（）；
如果（输入编号>0）{
对于（i=0；i







首日内容
第二天内容
第三天内容
第四天内容
下面是我从用户那里获得的输入，以了解要显示多少天：
天数：
这是您在jQuery中查找的代码：


$（窗口）.load（函数（）{
$（'form'）。提交（函数（e）{
var inputNumber=$（'#inputNumber'）.val（）；
如果（输入编号>0）{
$（'div[id^=“day”]，#days>ul>li'）。不是（'#days'）。隐藏（）；
$（'#days>ul>li:lt（'+inputNumber+'））.show（）；
}
返回false；
});
$（'div[id^=“day”]，#days>ul>li'）。不是（'#days'）。隐藏（）；
$（文档）。在（'click'，'a[href^=“#day”]”上，函数（e）{
e、 预防默认值（）；
$（'div[id^=“day”]）。不是（'#days'）。隐藏（）；
$（$（this.attr（'href'））.show（）；
});
});

天数：






首日内容
第二天内容
第三天内容
第四天内容
试试这个

我刚刚添加了另外两个类
dayLink
和
dayContent
，以便更容易地选择它们

$('form').submit(

    function() {
      //$('#days').empty();
      var inputNumber = $('#inputNumber').val(); 
      if (inputNumber>0) 
      {
        for (i=0; i < inputNumber; i++) 
        {
            $('<div id="day'+ i +'" class="dayContent">day ' + i + ' content</div>').appendTo('#days');
            $('<li><a class="dayLink" href="#day'+ i +'">Day '+ i +'</a></li>').appendTo('#days ul');

        }
        $('div[id^="day"]').not('#days').hide();
      }
      return false;
  });

  $('#days').on('click', "a.dayLink", function(e) {
    e.preventDefault();
    var hrefValue = $( this ).attr( "href" );
    console.log( hrefValue );
    $( ".dayContent" ).hide();
    $( hrefValue ).show();
  });

$（'form'）。提交(
函数（）{
//$（“#天”）.empty（）；
var inputNumber=$（'#inputNumber'）.val（）；
如果（输入编号>0）
{
对于（i=0；i”）。附录（“#天ul”）；
}
$（'div[id^=“day”]）。不是（'#days'）。隐藏（）；
}
返回false；
});
$（“#天”）。在（'click'，“a.dayLink”，函数（e）上{
e、 预防默认值（）；
var hrefValue=$（this.attr（“href”）；
console.log（hrefValue）；
$（“.dayContent”）.hide（）；
$（hrefValue.show（）；
});
对于要在页面加载时隐藏所有链接的第一部分。然后设置事件侦听器-
输入
或
单击
事件；两者都可以。使用
：lt（）
伪选择器选择所需链接并显示

第二部分。加载页面时隐藏div。然后读取
href
属性的值以确定要显示的值


$（函数（）{
//缓存DOM搜索，这样就不必在每次事件中都执行搜索
//提高应用程序的总体速度
var divs=$（'#days>div[id]'）；//或$（'#days>.day'）；
变量链接=$（“#days li”）；
divs.hide（）；
$（'#days li>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
divs.hide（）；
var clickedID=$（this.attr（'href'）；
$（单击edid.show（）；
});
$（'#number'）。在（'input'，function（）上{
var val=+this.value；
如果（valthis.max）{
这个值=“”；
返回false；
}
links.hide（）；
links.filter（':lt（+（+this.value）+'））.show（）；
divs.hide（）；
})
.触发器（“输入”）；
});







首日内容
第二天内容
第三天内容
第四天内容
我想你最终要寻找的是以下内容。今晚晚些时候，我会尽力详细解释这里发生的一切


//向输出区域添加/删除天数的方法
功能展示日（e）{
var iMax=parseInt（$（'#inpDays'）.val（）；
对于（i=0；我感谢您的回复，但几乎就是这样，只有当用户键入“4”时才会发生这种情况在表单中。如果他们键入1，则只有第1天会显示，并且可以单击。如果他们键入2，则只有前两天会显示，并且可以单击。基本上是尝试将您的代码与我在表单后发布的代码相结合。是的，这是我尝试完成的更多内容，但唯一的问题是“天”div是预定义的，因此我必须让它们以某种方式包含在脚本之外。
如果它们键入3，则会出现第1天第2天第3天。如果它们在第1天按，它们将有一些只存在于第1天的问题需要回答。第2天和第3天的问题将非常不同，因此我需要使用现有div的wi我希望这是有意义的？也许这是不可能的？是的，这是目标非常感谢你的帮助！我很感激！是的，这就是我想做的！如果输入了另一个号码，有没有办法隐藏内容？例如，如果你输入2，然后在第2天单击，那么你就不能键入1，第2天的内容在单击第1天之前仍将显示。还有一种方法不允许键入大于4的数字吗？我尝试设置最小值和最大值，但这种方法似乎不起作用。是的，当然。检查更新版本…添加了
divs.hide（）
在
输入
处理程序中。至于min和max，如果您使用inc./dec.箭头，它们在Chrome的这个演示上工作得很好。您测试的浏览器和版本是什么
$(function(){
    var $days = $('.day');

    $('.dayLink').on('click', function(){
        var $link = $(this);

        $days.hide();
        $days.filter(function(){
            return $(this).data('day') === $link.data('day');
        }).show();
    });
});

$('form').submit(

    function() {
      //$('#days').empty();
      var inputNumber = $('#inputNumber').val(); 
      if (inputNumber>0) 
      {
        for (i=0; i < inputNumber; i++) 
        {
            $('<div id="day'+ i +'" class="dayContent">day ' + i + ' content</div>').appendTo('#days');
            $('<li><a class="dayLink" href="#day'+ i +'">Day '+ i +'</a></li>').appendTo('#days ul');

        }
        $('div[id^="day"]').not('#days').hide();
      }
      return false;
  });

  $('#days').on('click', "a.dayLink", function(e) {
    e.preventDefault();
    var hrefValue = $( this ).attr( "href" );
    console.log( hrefValue );
    $( ".dayContent" ).hide();
    $( hrefValue ).show();
  });