I'm having problems using a variable as the selector for a paragraph on which I want to take action. Specifically I have several title elements and the same number of paragraphs. The desired result is that if I click on Title1 then I take an action on paragraph1. I made a simple case for development purposes whereby if I click on a title then the text of the corresponding paragraph changes color. If I hard code the solution it works but passing in a variable as the selector fails.
The jQuery is as follows:
jQuery(document).ready(function($){
$(this).click(function(){
var target=(event.target.id);// Get the id of the title on which we clicked. We will extract the number from this and use it to create a new id for the section we want to open.
alert(target);// checking that we are getting the right value.
var openaddress=target.replace(/click/gi, "section");//create the new id for the section we want to open.
alert('"#'+openaddress+'"');//Confirm that the correct ID has been created
$('"#'+openaddress+'"').css( "color", "green" );//get the id of the click element and set it as a variable.
//$("#section1").css( "color", "green" );//Test to confirm that hard coded selector functions correctly.
return false;// Suppress the action on the anchor link.
});
});
The alert returns the following variable
which appears to be correct and matches the hard coded version.
I've omitted the html since it works in the hard coded version I assume there is no problem on that side.
I'd appreciate any guidance on what I'm doing wrong and how to correct it.
Thanks
