81

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 alert returned showing the value of the 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

3
  • 3
    Try omitting the second quotes around "#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. Commented Jun 13, 2013 at 22:07
  • The "#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. Commented Jun 13, 2013 at 22:13
  • @FelixKling: Thanks for the help. I wasn't clear on the string literal and the value used by jQuery. I needed the explanation hence the 'duplicate' question for me wasn't helpful (but only because of my ignorance.) Commented Jun 13, 2013 at 22:38

1 Answer 1

227

You're thinking too complicated. It's actually just $('#'+openaddress).

Sign up to request clarification or add additional context in comments.

1 Comment

Alternatively you can use template literals (`). In your case $(`${openaddress}`)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.