How to use variable content as css class name?

Question

<?php
   echo("var answersC = answer-table-$qrow->id;");
   echo("var toggleC = toggle-table-$qrow->id;");
?>

   jQuery('toggleC').click(function() {
      jQuery('answersC').slideToggle('fast');
});

Instead of having a static css class name, I have a page that creates unique classes in a loop. I'm hoping to be able to toggle these individual areas, but I don't know how to use the variable string as the name of the css class.

I also tried it like this with no better luck.

<?php
   echo("var answersC = $qrow->id;");
   echo("var toggleC = $qrow->id;");
?>

   jQuery('.answer-table-'+answerC).click(function() {
      jQuery('answersC'+toggleC).slideToggle('fast');
});

Anyone have any ideas? I don't know enough to get this working. Thanks!

UPDATE: I should add that this is on a PHP page within script tags.

UPDATE 2:

I've been trying the various suggestions to the point that my eyeballs feel like they're holding back a head full of scrambled eggs. I'm pretty good at googling js solutions, but I don't have a very wide knowledge of it so it's hard to understand how to expand on them when they don't work.

Where I am now is this code: (note I switched from classes to ids)

<script type="text/javascript" language="javascript">
    <!--
    <?php
    echo("var answersC = 'answertable'+$qrow->id;");
    echo("var toggleC = 'toggletable'+$qrow->id;");
    ?>
    jQuery('#'+toggleC).click(function() {
    jQuery('#'+answersC).slideToggle('fast');
    });
    console.log('#'+toggleC); //example #toggletable6
    console.log('#'+answersC); //example #answertable6
    // -->
    </script>

I can see in firebug that the variable content matches the ids in the html and I'm getting no errors, but it still does nothing.

Elsewhere, I am using the following functions to display all answers for all questions:

$('.atoggle').click(function() {
$('.answer-table').slideToggle('fast');
});

This one works perfectly, only I really want to only open answers on a per question basis.

Note: The '$' vs. 'jQuery' difference is only because one is in a .js file within a wrapper function to allow the '$' within WordPress, the one that's not working is simply within the page source at this point. Big thanks to everyone for their input!

UPDATE (final):

For anyone who comes across this in a search, I'll post the final working code. There was an additional problem getting this to work that required wrapping everything in a document.ready function.

The working version:

<script type="text/javascript" language="javascript">
    jQuery(document).ready(function() {
    <!--
        <?php
        echo("var answersC = 'answertable'+$qrow->id;");
        echo("var newanswersC = 'newanswertable'+$qrow->id;");
        echo("var toggleC = 'toggletable'+$qrow->id;");
        ?>

        jQuery('.'+toggleC).click(function() {
        jQuery('.'+answersC).slideToggle('fast');
        jQuery('.'+newanswersC).slideToggle('fast');
        });
    });
        // -->
</script>

have you tried to see the results of this code evaluation? Your string variables just don't have quotes around. — zerkms
– zerkms, Commented Nov 12, 2011 at 1:17
I'd recommend an approach that doesn't involve generating Javascript. In your case I'd give all toggle buttons the same CSS class (say toggle), and give them the ID of the element they're toggling in a HTML data attribute. — millimoose
– millimoose, Commented Nov 12, 2011 at 1:21
In most cases you won't need to write so many click handlers. jQuery has awesome selectors and you could just write one handler to work for all the similar HTML tags. Post the typical rendered HTML and we would be able to help you write that handler. — amit_g
– amit_g, Commented Nov 12, 2011 at 1:21
Sorry I'm so slow to get back about this. I'm getting ready to try out the solutions offered, but wanted to explain the reason for this approach, if there's still a better one I am all for it. It's basically the back-end of a quiz app and for each question, there is a list of answers. The purpose for this script is to create a way to toggle the showing of the answers per individual question. I already got it working to toggle all answers for all questions, but would like a cleaner solution. — Michael Davis
– Michael Davis, Commented Nov 12, 2011 at 3:05
@amit_g - Could you expand on this a little? So I presume I would then have my script not only look for a click on the .class_name but also the matching id in the custom data attribute? I'm not sure how to write this part. — Michael Davis
– Michael Davis, Commented Nov 12, 2011 at 3:34

roselan · Accepted Answer · 2011-11-12 01:31:58Z

2

instead of

jQuery('toggleC').click(function() {
      jQuery('answersC').slideToggle('fast');

try

jQuery('.'+toggleC).click(function() {
      jQuery('.'+answersC).slideToggle('fast');

note that if you have several toggles and answers on your page, a toggleC click with tooggle all answers. To toggle only answers belonging to the click answer use:

jQuery('.'+toggleC).click(function() {
      jQuery(this).find('.'+answersC).slideToggle('fast');

finally, note that you don't need to add the the id in the class (transversability, yada yada), and that you can use something like

jQuery('table').delegate('.'+toggleC, 'click', (function() {
    jQuery(this).find('.'+answersC).slideToggle('fast');

in order to create only one event handler instead of "number of rows". (but this ain't very important)

edited Nov 12, 2011 at 1:31

answered Nov 12, 2011 at 1:23

roselan

3,7651 gold badge23 silver badges20 bronze badges

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

3 Comments

Michael Davis Over a year ago

Your suggestion for how to name the class in the function is correct and I've verified that parses to the correct id. But I've tried all three variations with the reworked code above but, even though I get no errors, it also doesn't display the content like it should. I realize the original question has been answered so I will probably take this to a new thread, but any more ideas would be greatly appreciated.

roselan Over a year ago

if you can edit your question, and add a bit of html including toogleC and answerC, it would help us greatly to help you ;)

Michael Davis Over a year ago

I had thought about that last night, but realized your answer had resolved my OP so instead I took the final issue to a new post. Turned out I just needed to wrap everything in a document.ready function and it all worked. Thank you again for taking the time to help me!

alexpirine · Accepted Answer · 2011-11-12 01:24:42Z

0

If answer-table-*ID* and answersC*ID* are classes attributed to certain HTML elements, try this:

<?php
echo 'var qrow_id = '.$qrow->id.';';
?>

jQuery('.answer-table-'+qrow_id).click(function() {
      jQuery('.answersC'+qrow_id).slideToggle('fast');
});

edited Nov 12, 2011 at 1:24

answered Nov 12, 2011 at 1:19

alexpirine

3,3432 gold badges34 silver badges42 bronze badges

1 Comment

alexpirine Over a year ago

Well spotted, but I assume $qrow->id is a number. Moreover, the problem resides in JavaScript. If answersC*ID* is a class, he should add a dot in jQuery('answersC'+toggleC).slideToggle('fast');.

Collectives™ on Stack Overflow

How to use variable content as css class name?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related