Using a variable in a jquery selector

[Deleted member 66701]

Hi all.

How do I use a variable in a jquery selector?

I.e. I want to do something like:

$("p(VAR)").hide();

where (VAR) is the variable I want to use.

This is the current code:-

 			<section id="one" class="main style2 right dark fullscreen">
				<div class="content box style2">
					<header>
						<h2>Biography</h2>
					</header>
<script>
var counter = 1
console.log(counter, "Hello, world!");
$(document).ready(function(){
$("p2,p3,p4,p5,p6,p7,p8").hide();
  $("#next").click(function(){


	  $("p1").hide();
	  counter++	  
	  console.log(counter, "Hello, world!");
    $("p2").show();
  });
});
</script>
					<p1>Beyoncé Knowles is a multi-platinum, Grammy Award-winning recording artist who's acclaimed for her thrilling vocals, videos and live shows.</p1>
                    <p2>Bio2</p2>
                    <br>
                    <p3>Implement variable to show bio(current)+1 on click event and to hide &le;bio(current).</p3>
                    <p4>Bio4</p4>
                    <p5>Bio5</p5>
                    <p6>Bio6</p6>
                    <p7>Bio7</p7>
                    <p8>Bio8</p8>
					<br>
<button id="next">Next</button>
				</div>
				<a href="#two" class="button style2 down anchored">Next</a>
			</section>

http://testing.frontierwebdesign.co.uk/

 

[Deleted member 66701]

Nevermind - sussed it

$("." + counter).show();

Folowing works a treat:

			<section id="one" class="main style2 right dark fullscreen">
				<div class="content box style2">
					<header>
						<h2>Biography</h2>
					</header>
<script>
var counter = 1
console.log(counter, "Hello, world!");
$(document).ready(function(){
$(".2,.3,.4,.5,.6,.7,.8").hide();
  $("#next").click(function(){


	  $("." + counter).hide();
	  counter++	  
	  console.log(counter, "Hello, world!");
    $("." + counter).show();
  });
});
</script>
					<p class="1">Beyoncé Knowles is a multi-platinum, Grammy Award-winning recording artist who's acclaimed for her thrilling vocals, videos and live shows.</p>
                    <p class="2">Bio2</p>
                    <br>
                    <p class="3">Implement variable to show bio(current)+1 on click event and to hide &le;bio(current).</p>
                    <p class="4">Bio4</p>
                    <p class="5">Bio5</p>
                    <p class="6">Bio6</p>
                    <p class="7">Bio7</p>
                    <p class="8">Bio8</p>
					<br>
<button id="next">Next</button>
				</div>
				<a href="#two" class="button style2 down anchored">Next</a>
			</section>

 

[Deleted member 66701]

You could do $("p:hidden").first().show() to show the first hidden element. Best to put them inside a parent container if your doing that though. Then target p elements inside the container.

Excellent - cheers

Only started learning jquery yesterday - a bit tougher than I imagined!

 

[Deleted member 66701]

Oh, also, class names which start with a number dont work in some browsers.
You can still do it the same way, just with some text in front of the numbers:

<p class="bio4">Bio4</p>
<p class="bio5">Bio5</p>
<p class="bio6">Bio6</p>
<p class="bio7">Bio7</p>
<p class="bio8">Bio8</p>

$(".bio" + counter).hide();

Cool - thanks