ansaurus

Question

Using javascript, show a certain amount of divs based on an answer

Answer 1

+1 A:

I would use a change handler for the quantity input. When it changes, get the number to show from its value. Use a selector to get the appropriate elements to show in a collection and filter them by their index relative to the number to show.

$('#qty_of_foo').change( function() {
    var show = parseInt($(this).val() || 0);
    $('#foo_panels > li').hide();
    $('#foo_panels').find('.panel')
                    .parent()
                    .filter( function(i) { return i < show; } )
                    .show();
});

You could also do the same with slice, though, you might have to do a bit more error checking.

$('#qty_of_foo').change( function() {
    var show = parseInt($(this).val() || 0);

    if (show <= 0) return true;

    $('#foo_panels > li').hide();
    $('#foo_panels').find('.panel')
                    .parent()
                    .slice( 0, show - 1 )
                    .show();
});

tvanfosson 2010-05-21 16:39:53

Answer 2

A:

first of all it will be more optimal to have "foo_panels" be an id. Then you will want your panel li's to have a class like 'panel' like this:

<li class"panel">
  <div class="foo_1">
  <h1>First foo's information</h1>
  <span>Foo name:&nbsp;<input type="text" size="20" /></span>
  </div>
</li>

Then you can hide/show the number of panels using .slice()

$(".panel").hide();
var panels = $(".panel", "#foo_panels"); //set panels group
$('#qty_of_foo').change( function() {
  $(panels).hide(); //hide any previously shown panels
  $(panels).slice(0, parseInt($(this).val())).show(); //show the slice
});

Also, you are going to want to get rid of that orphaned <li> right after <div class="foo_panels">. You also can't have a <div> in a <ul> that is not wrapped in a <li>.

UPDATE: I have created a jsFiddle that demonstrates the code (and in the process discovered an error in what I had posted which I have fixed.

Bradley Mountford 2010-05-21 16:48:45

That looks good, but how can I trigger the function? Keep in mind, I'm someone who was forced into learning JavaScript under live fire. I know that I needed to learn it, but not by being thrown into hand-to-hand combat with it...

Adam 2010-05-21 17:12:52

You just wrap it in $(function(){ }); (which is shorthand for $(document).ready(function(){}); ) so that it loads when the page is ready. Then $('#qty_of_foo').change( function() { is fired when you change the selection in your dropdown.

Bradley Mountford 2010-05-21 19:13:15

Check out my update that includes a jsFiddle demo.

Bradley Mountford 2010-05-21 19:33:05

ansaurus

tags:

views:

answers:

Using javascript, show a certain amount of divs based on an answer

related questions