CODEWITHSUNDEEP
javascriptjqueryhtml
Monsieur Bonhomme
Monsieur Bonhomme

Reputation: 31

Use a Class Name to display #ID+this.substring(1) (the dot)

I've got several ID's with the same class specifications but the text content who changes. With jQuery, I'd like to call my class .job on a click function to display the appropriate #paper_appropriatejob.

<script src="src/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(".job").click(function(){
    var theclass:String = this;
    var thejob:String = theclass.substring(1);
    $("#paper_"+thejob).fadeIn(400);
});
</script>

I tried next one first qith but no even results:

<script type="text/javascript">
$(".job").click(function(){
    $("#paper_"+ this).fadeIn(400);
});
</script>

The HTML : 

<div id="inge_sys" class="job" style= "background-image: url('src/img/salles/explo/ingesys.png')"></div>
<div id="cosmo" class="job" style= "background-image: url('src/img/salles/explo/cosmo.png')"></div>
<div id="astro" class="job" style= "background-image: url('src/img/salles/explo/astro.png')"></div>


<div id="paper_cosmo" class="paper">Text</div>
<div id="paper_astro" class="paper">Text</div>

Upvotes: 0

Views: 160

Answers (2)

David Thomas
David Thomas

Reputation: 253456

I'd suggest:

$(".job").click(function(){
    $("#paper_"+ this.id).fadeIn(400);
});

And if you only want to have one of the .paper elements showing at a time:

$(".job").click(function(){
    $('.paper').fadeOut(function(){
        $("#paper_"+ this.id).fadeIn(400);
    });
});

Upvotes: 2

Ziarno
Ziarno

Reputation: 7572

First of all, this is no a valid syntax:

var theclass:String = this;

if you want to a string value of id or a class, just use this:

var thisClass = $(this).attr('class');
// or 
var id = $(this).attr('id');

then you can do what you wanted:

$("#paper_"+ thisClass).fadeIn(400);

Upvotes: 1

Related Questions