This question already has an answer here:
- jQuery selectors with variables 4 answers
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
"#section1"
so the string actually passed to jQuery will be#section1
as desired. If that makes sense. Try just passing'#' + openaddress
. Note that your code passes in"#section1"
and your test uses#section1
. – Ryan E yesterday"#foo"
in$("#foo")
is called a string literal and it produces the string value#foo
. String literals are denoted by two quotation marks (either double or single quotes). This is similar for other values:[...]
denote an array,/.../
a regex literal,{...}
an object, etc. Those symbols tell the parser how to interpret the character sequence. They are not part of the value themselves! So, jQuery expects#foo
as a selector, but you are including the quotation marks in the value and pass'#foo'
, which is incorrect. – Felix Kling yesterday