Dynamically Calling On Existing Divs With Jquery

January 31, 2024 Post a Comment

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 appvar 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 = '';
            returnfalse;
        }
        links.hide();
        links.filter(':lt(' + (+this.value) + ')').show();
        divs.hide();
    })
    .trigger('input');
});

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

Solution 2:

<li><ahref="#"class="dayLink"data-day="1">Day 1</a></li><li><ahref="#"class="dayLink"data-day="2">Day 2</a></li><li><ahref="#"class="dayLink"data-day="3">Day 3</a></li><li><ahref="#"class="dayLink"data-day="4">Day 4</a></li><divclass="day"data-day="1">first day content</div><divclass="day"data-day="2">second day content</div><divclass="day"data-day="3">third day content</div><divclass="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();
      }
      returnfalse;
  });

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

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formaction="#"method="post"><labelfor="inputNumber">Number of days:</label><inputid="inputNumber"name="inputNumber"type="number"step="1"min="1"max="4"/><inputtype="submit"value="Enter" /></form><divid="days"><ul><li><ahref="#day1">Day 1</a></li><li><ahref="#day2">Day 2</a></li><li><ahref="#day3">Day 3</a></li><li><ahref="#day4">Day 4</a></li></ul><divid="day1">first day content</div><divid="day2">second day content</div><divid="day3">third day content</div><divid="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 areafunctionshowDays(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; }
#daysOutul { margin: 0; padding: 0; }
#daysOutli { list-style: none; }
#daysOutlia { color: red; text-decoration: none; }
#daysOutli.selecteda { color: blue; text-decoration: underline; }
#daysOutlidiv { max-width: 8em; padding: .25em .5em; text-align: center; }
#daysOutli.selecteddiv { background: #00F7F7; }

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

Html5 Learning