php - 如何使用变量内容作为 css 类名？

Question

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

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

我没有一个静态的 css 类名，而是一个在循环中创建唯一类的页面。我希望能够切换这些单独的区域，但我不知道如何使用变量字符串作为 css 类的名称。

我也这样试过，运气不好。

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

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

有人有什么想法吗？我不知道如何让这个工作。谢谢!

更新:我应该补充一点，这是在脚本标签内的 PHP 页面上。

更新 2:

我一直在尝试各种建议，以至于我的眼球感觉像是在挡住满脑子的炒鸡蛋。我非常擅长用谷歌搜索 js 解决方案，但我对它的了解并不广泛，因此很难理解如何在它们不起作用时扩展它们。

我现在所在的位置是这段代码:(注意我从类切换到了 id)

<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>

我可以在 firebug 中看到变量内容与 html 中的 id 相匹配，而且我没有错误，但它仍然什么都不做。

在其他地方，我使用以下函数来显示所有问题的所有答案:

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

这个很完美，只是我真的只想在每个问题的基础上打开答案。

注意:'$' 与 'jQuery' 的区别只是因为一个位于包装函数中的 .js 文件中以允许 WordPress 中的 '$'，而不起作用的只是位于页面源代码中这点。非常感谢大家的投入!

更新(最终):

对于在搜索中遇到此问题的任何人，我将发布最终的工作代码。让它工作还有一个额外的问题，需要将所有内容包装在 document.ready 函数中。

工作版本:

<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>

Answer 1

代替

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

尝试

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

请注意，如果您的页面上有多个切换和答案，请单击 toggle all 答案。要仅切换属于点击答案的答案，请使用:

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

最后，请注意，您不需要在类中添加 id(可移植性，yada yada)，您可以使用类似

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

为了只创建一个事件处理程序而不是“行数”。 (但这不是很重要)