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 wou

Solution 1:

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>

Solution 2:

<li><a href="#" class="dayLink" data-day="1">Day 1</a></li>
<li><a href="#" class="dayLink" data-day="2">Day 2</a></li>
<li><a href="#" class="dayLink" data-day="3">Day 3</a></li>
<li><a href="#" class="dayLink" data-day="4">Day 4</a></li>
<div class="day" data-day="1">first day content</div>
<div class="day" data-day="2">second day content</div>
<div class="day" data-day="3">third day content</div>
<div class="day" data-day="4">four day content</div>

SCRIPT

$(function(){
    var $days = $('.day');

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

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

Solution 3:

try this fiddle

I have just added a couple of more classes dayLink and dayContent to make it easier to select them.

$('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();
  });

Solution 4:

This is the code you are looking for in jQuery:

$(window).load(function(){
  $('form').submit(function(e) {
    var inputNumber = $('#inputNumber').val();
    if (inputNumber>0) {
      $('div[id^="day"], #days > ul > li').not('#days').hide();
      $('#days > ul > li:lt(' + inputNumber + ')').show();
    }
    return false;
  });

  $('div[id^="day"], #days > ul > li').not('#days').hide();

  $(document).on('click', 'a[href^="#day"]', function(e) {
    e.preventDefault();
    $('div[id^="day"]').not('#days').hide();
    $($(this).attr('href')).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="#" method="post">
    <label for="inputNumber">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">
    <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">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>

Solution 5:

I think what you're looking for, in the end, is something like the following. I'll try to break down a full explanation of everything going on here later tonight.

// method to add/remove days to output area
function showDays(e) {
	var iMax = parseInt($('#inpDays').val());
    for (i=0;i<4;i++) {
        if (i < iMax) {
            if (!$('#daysOut li').eq(i).length) $('#days-placeholders li').eq(i).clone().appendTo('#daysOut ul');
        }
        else $('#daysOut li').eq(i).remove();
    }
}
$(function() {  //  <-- same as $(document).ready
    //  these first 2 lines simply assign our show/remove days method to change event on input and click event on button
	$('#daysIn').on('change', 'input[type=number]', showDays);
	$('#daysIn').on('click', 'input[type=button]', showDays);
    //  the following adds click event to "dynamically" created content
    $('#daysOut').on('click', 'li a', function(e) {
    	$(this).closest('li').addClass('selected').siblings('.selected').removeClass('selected').find('div').slideUp();
    	$(this).next('div').slideDown();
    })
})

#days-placeholders, .day .content { display: none; }

#daysOut { padding: 1em; }
#daysOut ul { margin: 0; padding: 0; }
#daysOut li { list-style: none; }
#daysOut li a { color: red; text-decoration: none; }
#daysOut li.selected a { color: blue; text-decoration: underline; }
#daysOut li div { max-width: 8em; padding: .25em .5em; text-align: center; }
#daysOut li.selected div { background: #00F7F7; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="days-placeholders">
    <ul>
        <li class="day day-1">
            <a href="javascript:void(0)" class="btn">Day 1</a>
            <div class="content">first day content</div>
        </li>
        <li class="day day-2">
            <a href="javascript:void(0)" class="btn">Day 2</a>
            <div class="content">second day content</div>
        </li>
        <li class="day day-3">
            <a href="javascript:void(0)" class="btn">Day 3</a>
            <div class="content">third day content</div>
        </li>
        <li class="day day-4">
            <a href="javascript:void(0)" class="btn">Day 4</a>
            <div class="content">fourth day content</div>
        </li>
    </ul>
</div>
<div id="daysIn">
    <label for="inpDays">Number of days:</label>
    <input id="inpDays" name="inpDays" type="number" step="1" min="0" max="4" />
    <input id="btnSubmit" type="button" value="Enter" />
</div>
<div id="daysOut">
    <ul></ul>
</div>