Как использовать переменное содержимое в качестве имени класса CSS? - PullRequest
1 голос
/ 12 ноября 2011
<?php
   echo("var answersC = answer-table-$qrow->id;");
   echo("var toggleC = toggle-table-$qrow->id;");
?>

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

Вместо статического имени класса CSS, у меня есть страница, которая создает уникальные классы в цикле.Я надеюсь, что смогу переключать эти отдельные области, но я не знаю, как использовать переменную string в качестве имени класса 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, но не очень разбираюсь в них, поэтому трудно понять, как их расширить, когда они не работают.

Где я сейчас нахожусьэтот код: (обратите внимание, я переключился с классов на идентификаторы)

<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, и я получаю без ошибок , но все равно ничего не делает .

В других местах я использую следующие функции для отображения всех ответов на все вопросы:

$('.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>

Ответы [ 2 ]

2 голосов
/ 12 ноября 2011

вместо

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

попробуйте

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

обратите внимание, что если у вас есть несколько переключателей и ответов на вашей странице, нажмите toggleC с переключателем all answers,Чтобы переключать только ответы, относящиеся к ответу по клику, используйте:

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

, наконец, обратите внимание, что вам не нужно добавлять идентификатор в классе (transversability, yada yada), и что вы можете использовать что-токак

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

, чтобы создать только один обработчик событий вместо «количество строк».(но это не очень важно)

0 голосов
/ 12 ноября 2011

Если answer-table-*ID* и answersC*ID* являются классами, относящимися к определенным элементам HTML, попробуйте следующее:

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

jQuery('.answer-table-'+qrow_id).click(function() {
      jQuery('.answersC'+qrow_id).slideToggle('fast');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...