Jump to content
Larry Ullman's Book Forums

Simple Question Brackets And Variable


Recommended Posts

Hi all,

 

I've been kept away from the computer lately with other jobs & it seems to take some time to get back into the swing of things again. Also, I haven't studied javascript or jquery properly yet as I want to finish the PHP/MySQL book first (on chapter 11) so please forgive me for what is probably a simple question as follows:

 

I would like to add a little jquery functionality and I'm having a syntax error probably something to do with the '' or "" symbols.

 

So the script works fine as follows:

<script>

    $(document).ready(
        function(){
            $('#table1').hide();
            $('#button1').click(function(){
                $('#table1').toggle();
            });
        });    
$(document).ready(
        function(){
            $('#table2').hide();
            $('#button2').click(function(){
                $('#table2').toggle();
            });
        });    
$(document).ready(
        function(){
            $('#table3').hide();
            $('#button3').click(function(){
                $('#table3').toggle();
            });
        });    
$(document).ready(
        function(){
            $('#table4').hide();
            $('#button4').click(function(){
                $('#table4').toggle();
            });
        });    
$(document).ready(
        function(){
            $('#table5').hide();
            $('#button5').click(function(){
                $('#table5').toggle();
            });
        });

</script>

but I can't seem to get it to work as follows:

(I reckon it is to do with the +i being outside the ''?

<script>
$(document).ready(
        function(){
            var i =1;
            for (i = 1; i <= 5; i++){
                $('#table'+i).hide();
                $('#button'+i).click(function(){
                    $('#table'+i).toggle();
                });
                console.log('#table'+i);
                console.log('#button'+i);
            }
        });
</script>
Link to comment
Share on other sites

This is not a syntax issue. It's a closure issue.

If you're new to JS, this is a pretty advanced topic to cover, so I'm going to start by referring you to the following:

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

 

If you still can't understand what's wrong with your code and how you need to fix it, then please come back here and let us know, and I'll try to better explain things.

Thanks.

  • Upvote 1
Link to comment
Share on other sites

This is not a syntax issue. It's a closure issue.

If you're new to JS, this is a pretty advanced topic to cover, so I'm going to start by referring you to the following:

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

 

 

Hi Hartley,

Thanks for the answer, that's fine. I prefer not to go into depth on something in a half-hazard manner.

I prefer the systematic approach to learning.

I thought the issue was something simple I was missing.

In that case, I think I am going to wait until I get to "Modern Javascript" and cover it in a more methodical manner.

Is this issue dealt with in the book do you know?

 

I'm going to put this into my tasks and post back the solution in a few months when I get to it.

Thanks again,

Stephen

Link to comment
Share on other sites

Closure is mentioned in the book, but in all honesty, I wish that Larry would have gone more in-depth with it with more examples. It's a very important concept to understand, and it's tricky until you get it down.

All the same, he does mention it, and his little blurb about it might be enough for you to get it. If it's not, please come back and ask about it, and I'll try to explain it.

Thanks.

Link to comment
Share on other sites

 Share

×
×
  • Create New...