どのようにCSSのクラス名として変数のコンテンツを使用するには?

<?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');
});

誰でもアイデアはありますか?私はこれを得るために十分に知りません。ありがとう!

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

更新2:

私は、スクランブルエッグでいっぱいになった頭を握っているように、私の眼球が感じる点まで様々な提案を試みてきました。私はGoogleのソリューションをグーグル・グーグルでやっていますが、それについて非常に幅広い知識を持っていないので、うまく機能しないときにどのように拡張するのかを理解するのは難しいです。

私が今ここにいるのはこのコードです:(私はクラスから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>

私は火かき棒の中で、変数の内容がhtmlのidと一致し、エラーなしが表示されますが、何もしません。

他の場所では、以下の機能を使用してすべての質問のすべての回答を表示しています。

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

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

注: '$'と 'jQuery'の違いは、WordPress内で '$'を許可するためのラッパー関数内の.jsファイル内にあるためです。この時点ではページ・ソース内には機能しません。皆さんに大きな感謝の意を表します!

更新(最終):

これを検索して誰かが来たら、私は最終的な作業コードを投稿します。 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>
1
追加された 編集された
ビュー: 1
あなたはこのコード評価の結果を見てみましたか?文字列変数には引用符が付きません。
追加された 著者 zerkms,
ほとんどの場合、多くのクリックハンドラを記述する必要はありません。 jQueryには素晴らしいセレクタがあり、同様のHTMLタグをすべて処理するハンドラを書くことができます。典型的なレンダリングされたHTMLを投稿すれば、そのハンドラを書くのを手伝うことができます。
追加された 著者 amit_g,
私は、Javascriptの生成を伴わないアプローチをお勧めしたいと思います。あなたの場合は、すべてのトグルボタンに同じCSSクラス( toggle )を付け、HTMLデータ属性でトグルしている要素のIDを渡します。
追加された 著者 millimoose,
@MichaelDavis私が意味するものの例: jsfiddle.net/YKJqT
追加された 著者 millimoose,
申し訳ありませんが、私はこのことについてとても遅くなっています。私は提供されたソリューションを試してみる準備が整いましたが、私はそれがまだ優れている場合、このアプローチの理由を説明したかったのです。基本的にはクイズアプリのバックエンドであり、各質問には回答リストがあります。このスクリプトの目的は、個々の質問ごとの回答の表示を切り替える方法を作成することです。私はすでにすべての質問のすべての回答を切り替えるように働いていますが、より洗練されたソリューションを希望します。
追加された 著者 Michael Davis,
@amit_g - これを少し拡張できますか?ですから、私はスクリプトが.class_nameをクリックするだけでなく、カスタムデータ属性の一致するIDを探すようにするでしょうか?私はこの部分を書く方法がわかりません。
追加された 著者 Michael Davis,
おっと、私は上記のコメントで@Inerdiaを意味しました。
追加された 著者 Michael Davis,
@zerkims - いくつか変更を加え、js変数が正しい文字列を保持していることを確認しました。私は、スクリプトの最新のバリエーションを表示するために質問を更新しましたが、まだ動作しません。
追加された 著者 Michael Davis,
@Inerdia - jsfiddleデモをありがとう。私はそれを取って私のソリューションに実装することができました。この方法ではるかに効率的だと思われます。最初に ".on"オブジェクト(?)に問題があったので、.on( "click"、function()を.click(function()に変更しなければならなかった)WPにはjq 1.7が含まれていないプラグインがjQueryの特定のバージョンを呼び出さないようにしたいと思っていました。
追加された 著者 Michael Davis,

2 答え

の代わりに

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

お試しください

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

ページに複数のトグルと回答がある場合は、すべての回答をトグルしてクリックしてください。クリック応答に属する回答だけを切り替えるには:

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

最後に、クラス内にidを追加する必要はないことに注意してください(transversability、yada yada)。

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

in order to create only one event handler の代わりに "number of rows". (but this ain't very important)

2
追加された
あなたの質問を編集して、toogleCとanswerCを含むhtmlのビットを追加すれば、あなたを助けてくれるはずです。
追加された 著者 roselan,
関数の中でクラスの名前を付ける方法についてのあなたの提案は正しいです。正しいIDを解析することを確認しました。しかし、私は上記のリワークされたコードで3つすべてのバリエーションを試しましたが、エラーがなくても、そのようなコンテンツは表示されません。元の質問に答えられたので、私はおそらくこれを新しいスレッドに取りますが、これ以上のアイデアは大いにありがたく思っています。
追加された 著者 Michael Davis,
私はその昨夜について考えていましたが、あなたの答えが私の仕事を解決したと分かったので、最終的な問題を新しい投稿にしました。私は、document.ready関数内のすべてをラップする必要があり、それはすべて機能しました。私を助ける時間をとってくれてありがとう!
追加された 著者 Michael Davis,

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');
});
0
追加された
実際には同じミスで同じコードです
追加された 著者 zerkms,
よく分かりますが、私は $ qrow-> id は数字であると仮定します。さらに、問題はJavaScriptにあります。 answersC * ID * がクラスの場合は、 jQuery( 'answersC' + toggleC).slideToggle( 'fast'); にドットを追加する必要があります。
追加された 著者 alexpirine,
PHP - 日本のコミュニティ [ja]
PHP - 日本のコミュニティ [ja]
4 参加者の

招待状へのリンク: https://t.me/joinchat/B2gdSlA_dh1-BQtEKA2dfw このグループではPHPについて話します。 パートナー:kotaeta.com