[jQuery] Re: Reusing script
I would go with the common parent or the common class solutions, as
weidc and Thomas said.
Another way to have jQuery match your 'steps', use something on those
lines:
var steps = $('[class*=step]).filter(function(){ return /\bstep\d+
\b/.test(this.className) })
then
steps.bind('click', function() {
steps.addClass('hiddenstep');
$(this).removeClass('hiddenstep')
})
On 24 mar, 10:47, phelyer paulhel...@gmail.com wrote:
Hi,
I am using JQuery to show and hide sections of text within my page.
The page has 10 sections of thext and 10 links.
I want to initially hide all 10 sections of text, and then show
section 3 when the link for section 3 is clicked, but make sure any
previously shown sections are then hidden.
Here is what I have used so far which dies wxactly what I want but
seems very long winded.
$(document).ready(function hideAll() {
//$('.stepText').hide();
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
$('.step1').click(function(){
$('.step1').removeClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step2').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').removeClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step3').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').removeClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step4').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').removeClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step5').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').removeClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step6').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').removeClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step7').click(function(){
$('.step1').addClass('hiddenstep');
[jQuery] Re: Reusing script
what are these classes? a tags? is there a div or something around all
of them?
i would do it like so:
lets say they got a parent div class=whatever
$(.whatever).children().click(function(){
$(.whatever).children().addClass('hiddenstep');
$(this).removeClass('hiddenstep');
});
well this should work but i didn't tested it.
On 24 Mrz., 10:47, phelyer paulhel...@gmail.com wrote:
Hi,
I am using JQuery to show and hide sections of text within my page.
The page has 10 sections of thext and 10 links.
I want to initially hide all 10 sections of text, and then show
section 3 when the link for section 3 is clicked, but make sure any
previously shown sections are then hidden.
Here is what I have used so far which dies wxactly what I want but
seems very long winded.
$(document).ready(function hideAll() {
//$('.stepText').hide();
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
$('.step1').click(function(){
$('.step1').removeClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step2').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').removeClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step3').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').removeClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step4').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').removeClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step5').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').removeClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step6').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').removeClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step7').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
[jQuery] Re: Reusing script
I would add one common class to to all your .step1, ..., .step10
elements in your mark-up, and then do this:
// say the common class is step
$(document).ready(function() {
var $steps = $('.step');
$steps
.addClass('hiddenStep')
.click(
function() {
$steps.addClass('hiddenStep');
$(this).removeClass('hiddenStep');
}
);
}
On Mar 24, 10:47 am, phelyer paulhel...@gmail.com wrote:
Hi,
I am using JQuery to show and hide sections of text within my page.
The page has 10 sections of thext and 10 links.
I want to initially hide all 10 sections of text, and then show
section 3 when the link for section 3 is clicked, but make sure any
previously shown sections are then hidden.
Here is what I have used so far which dies wxactly what I want but
seems very long winded.
$(document).ready(function hideAll() {
//$('.stepText').hide();
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
$('.step1').click(function(){
$('.step1').removeClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step2').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').removeClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step3').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').removeClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step4').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').removeClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step5').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').removeClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step6').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').removeClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step7').click(function(){
$('.step1').addClass('hiddenstep');
