javascript - 使用 jquery 动态调用现有的 div

Question

我是 jQuery 的新手，我似乎无法弄清楚...

我想要求用户输入天数，最少 1 天，最多 4 天。因此，如果他们输入“3”，则显示为:第一天第 2 天第 3 天

我不知道如何让这些内容可点击，这样如果点击第 2 天，就会显示 div id day2 的内容，如果他们点击第 3 天，第 2 天就会消失，第 3 天的内容就会出现。

我想要显示的现有 div，以及我从用户那里获得输入以了解要显示多少天的位置:

$(window).load(function(){
  $('form').submit(function() {
    $('#days').empty();
    var inputNumber = $('#inputNumber').val(); 
    if (inputNumber>0) {
      for (i=0; i < inputNumber; i++) {
        $('<div id="#showdays' + i + '" />').text('Div: ' + (i+1)).appendTo('#days');
      }
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="days">
  <ul>
    <li><a href="#day1">Day 1</a></li>
    <li><a href="#day2">Day 3</a></li>
    <li><a href="#day3">Day 3</a></li>
    <li><a href="#day4">Day 4</a></li>
  </ul>
  <div id="day1">first day content</div>
  <div id="day2">second day content</div>
  <div id="day3">third day content</div>
  <div id="day4">fourth day content</div>
</div>

Below is where I get input from user to know how many days to display:


<form action="#" method="post">
  <label for="inputLabel">Number of days:</label>
  <input id="inputNumber" name="inputNumber" type="number" step="1"  min="1"  max="4"/>
  <input type="submit" value="Enter" />
</form>

<div id="days"></div>

我在想是否将 div 放入数组中可能会有所帮助，但我真的不知道解决这个问题的最佳方法。任何见解都会有所帮助，谢谢。

Answer 1

对于第一部分，您希望在页面加载时隐藏所有链接。然后设置一个事件监听器——input或者click事件；两者都可以。使用 :lt() 伪选择器来选择所需的链接并显示。

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

$(function() {
    //Cache DOM searches so the searches do not have to be done at every event
    //Improrves overal speed of app
    var divs = $('#days > div[id]'); //or $('#days > .day');
    var links = $('#days li');
    divs.hide();
    $('#days li > a').on('click', function( e ) {
        e.preventDefault();
        divs.hide();
        var clickedID = $(this).attr('href');
        $( clickedID ).show();
    });
  

    $('#number').on('input', function() {
        var val = +this.value;
        if( val < this.min || val > this.max ) {
            this.value = '';
            return false;
        }
        links.hide();
        links.filter(':lt(' + (+this.value) + ')').show();
        divs.hide();
    })
    .trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" name="number" id="number" min="1" max="4"  />
<div id="days">
   <ul>
    <li><a href="#day1">Day 1</a></li>
    <li><a href="#day2">Day 2</a></li>
    <li><a href="#day3">Day 3</a></li>
    <li><a href="#day4">Day 4</a></li>
   </ul>
    <div id="day1" class="day">first day content</div>
    <div id="day2" class="day">second day content</div>
    <div id="day3" class="day">third day content</div>
    <div id="day4" class="day">fourth day content</div>
</div>