Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

This question already has an answer here:

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

share|improve this question
1  
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. – Ryan E yesterday
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. – Felix Kling yesterday
@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.) – dorich yesterday
@RyanE: Thanks, I think I understand it now. – dorich yesterday

marked as duplicate by Felix Kling, Zenith, Omar, Derek Henderson, Sindre Sorhus 23 hours ago

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1 Answer

up vote 4 down vote accepted

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

share|improve this answer
Thanks, that's it. I'll accept as soon as I'm able. – dorich yesterday

Not the answer you're looking for? Browse other questions tagged or ask your own question.