Teacic Teacic - 5 months ago 14
jQuery Question

Dynamically calling on existing divs with jquery

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

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

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.

My existing divs that I want to make appear:

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


<script type='text/javascript'>
$(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>


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.

Answer

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.

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>

Comments