使用jquery动态调用现有div [英] Dynamically calling on existing divs with jquery

问题描述

我是jQuery的新手，我似乎无法解决这个问题...

I am very new to jQuery and I can't seem to figure this out...

我想要求用户输入天数，至少1和最多4.
因此，如果他们输入3，则显示为：
第1天
第2天
第3天

I want to ask the user to enter an amount of days, at least 1 and at most 4. So if they enter "3", then displayed would be: Day 1 Day 2 Day 3

我无法弄清楚如何使这些可点击，所以如果点击第2天，将显示div id day2的内容，如果他们点击第3天，第2天就会消失第3天内容出现。

I can't figure out how to make these clickable, so that if day 2 is clicked, the content for div id day2 is displayed, and if they click on day 3, day 2 goes away and day 3 content appears.

我想要显示的现有div，以及我从用户那里获得输入以了解要显示的天数：

My existing divs that I want to make appear, and where I get input from user to know how many days to display:

$(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作为数组可能会有所帮助，但我真的不知道解决这个问题的最佳方法。
任何见解都会有所帮助，谢谢。

I was thinking if making the divs into an array might help but I really don't know the best way to tackle this. Any insight will help, thank you.

推荐答案

对于第一部分，你要隐藏所有的链接页面加载。然后设置一个事件监听器 - 输入或点击事件;要不是很好。使用：lt（）伪选择器来选择所需的链接并显示。

For the first part you want to hide all the links when the page loads. Then set up an event listener - input or click events; either is fine. The use :lt() pseudo selector to select desired links and display.

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

Second part. Hide divs when the page loads. Then read the value of the href attribute to determine which one to display.

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

这篇关于使用jquery动态调用现有div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！