[jQuery] Re: Help making my code more efficient...
Brianfidler wrote: Can anybody offer some advice on how to make the following code more efficient? I'm reusing a lot of the same code and I know it can be streamlined quite a bit. $(document).ready(function() { $('#question1').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer1').removeClass('hidden'); }); $('#question2').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer2').removeClass('hidden'); }); $('#question3').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer3').removeClass('hidden'); }); $('#question4').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer4').removeClass('hidden'); }); $('#question5').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer5').removeClass('hidden'); }); $('#question6').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer6').removeClass('hidden'); }); }); Add a question class to each of your clickable questions and an answer class to each of your hidable answers. Then use: $(document).ready(function() { $('.question').click(function() { var answerNum = this.id.replace('question',''); $('#contentblock .answer').addClass('hidden'); $('#contentblock #answer' + answerNum).removeClass('hidden'); }); }); This hides all answers based on class and then unhides the desired answer based on id. I use this.id.replace('question','') instead of this.id.substr(8,1) to make it more obvious what I'm doing. Also, I tend to use underscores to cleanly separate naming from numbering in ids, but it's just a style I like: $(document).ready(function() { $('.question').click(function() { var answerNum = this.id.replace('question_',''); $('#contentblock .answer').addClass('hidden'); $('#contentblock #answer_' + answerNum).removeClass('hidden'); }); }); HTH and LMK if it gives you what you need. -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org
[jQuery] Re: Help making my code more efficient...
Are your Question 1,2,3,4,5,6 textboxes, checkboxes or something like that? On Jan 2, 6:30 am, brianfidler [EMAIL PROTECTED] wrote: Can anybody offer some advice on how to make the following code more efficient? I'm reusing a lot of the same code and I know it can be streamlined quite a bit. thanks... $(document).ready(function() { $('#question1').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer1').removeClass('hidden'); }); $('#question2').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer2').removeClass('hidden'); }); $('#question3').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer3').removeClass('hidden'); }); $('#question4').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer4').removeClass('hidden'); }); $('#question5').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer5').removeClass('hidden'); }); $('#question6').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer6').removeClass('hidden'); });});
[jQuery] Re: Help making my code more efficient...
Is this for something like a FAQ? If so, a simple way to do this is with a definition list, like so: $(#FAQ dt) .click(function() { $(#FAQ dd).hide(); $(this).next().show(); } ); You'll want to pre-hide your dds, with something like $(#FAQ dd).hide(); in the ready script. If definition lists don't work for you, you could still do something similar as long as you have a strict q,a,q,a,q,a... sequence. Larry On Jan 1, 11:30 pm, brianfidler [EMAIL PROTECTED] wrote: Can anybody offer some advice on how to make the following code more efficient? I'm reusing a lot of the same code and I know it can be streamlined quite a bit. thanks... $(document).ready(function() { $('#question1').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer1').removeClass('hidden'); }); $('#question2').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer2').removeClass('hidden'); }); $('#question3').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer3').removeClass('hidden'); }); $('#question4').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer4').removeClass('hidden'); }); $('#question5').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer5').removeClass('hidden'); }); $('#question6').click(function() { $('#contentblock #answer6, #contentblock #answer5, #contentblock #answer4, #contentblock #answer3, #contentblock #answer2, #contentblock #answer1').addClass('hidden'); $('#contentblock #answer6').removeClass('hidden'); }); });- Hide quoted text - - Show quoted text -