Hoe gebruik je variabele inhoud als css class naam?

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

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

In plaats van een statische CSS-klassenaam, heb ik een pagina die unieke klassen in een lus maakt. Ik hoop dat ik deze afzonderlijke gebieden kan wijzigen, maar ik weet niet hoe ik de variabele string moet gebruiken als de naam van de css-klasse.

Ik probeerde het ook zo zonder meer geluk.

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

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

Heeft iemand ideeën? Ik weet niet genoeg om dit te laten werken. Bedankt!

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

UPDATE 2:

Ik heb de verschillende suggesties zo uitgeprobeerd dat mijn oogballen het gevoel hebben dat ze een kop vol roerei tegenhouden. Ik ben redelijk goed in het googlen van js-oplossingen, maar ik heb er geen erg brede kennis van, dus het is moeilijk te begrijpen hoe je ze kunt uitbreiden als ze niet werken.

Waar ik nu ben is deze code: (let op ik schakelde van klassen naar id's)

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

Ik zie in firebug dat de variabele inhoud overeenkomt met de ID's in de html en dat ik geen fouten , krijg, maar het doet nog steeds niets .

Elders gebruik ik de volgende functies om alle antwoorden voor alle vragen weer te geven:

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

Deze werkt perfect, alleen wil ik alleen antwoorden per vraag openen.

Opmerking: het verschil '$' versus 'jQuery' is alleen omdat er een in een .js-bestand binnen een wrapper-functie zit om de '$' binnen WordPress toe te staan, degene die niet werkt, bevindt zich op dit punt gewoon in de paginabron. Grote dank aan iedereen voor hun inbreng!

UPDATE (definitief):

Voor iedereen die dit in een zoekopdracht tegenkomt, plaats ik de definitieve werkcode. Er was een bijkomend probleem om dit te laten werken, waarbij alles in een document.ready-functie moest worden ingepakt.

De werkende versie:

<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
heb je geprobeerd de resultaten van deze code-evaluatie te zien? Uw stringvariabelen hebben gewoon geen aanhalingstekens in de buurt.
toegevoegd de auteur zerkms, de bron
In de meeste gevallen hoeft u niet zoveel klikbehandelaars te schrijven. jQuery heeft geweldige selectors en je zou gewoon een handler kunnen schrijven om voor alle vergelijkbare HTML-tags te werken. Plaats de standaard weergegeven HTML en we kunnen u helpen die handler te schrijven.
toegevoegd de auteur amit_g, de bron
Ik zou een aanpak aanbevelen waarbij geen Javascript wordt gegenereerd. In jouw geval geef ik alle schakelknoppen dezelfde CSS-klasse (zeg toggle ), en geef ze de ID van het element dat ze in een HTML-gegevenskenmerk wisselen.
toegevoegd de auteur millimoose, de bron
@MichaelDavis Een voorbeeld van wat ik bedoelde: jsfiddle.net/YKJqT
toegevoegd de auteur millimoose, de bron
Sorry dat ik zo traag ben om hierover terug te komen. Ik bereid me voor om de aangeboden oplossingen uit te proberen, maar wilde de reden voor deze aanpak uitleggen, als er nog een betere is, ben ik er helemaal voor. Het is in feite de back-end van een quiz-app en voor elke vraag is er een lijst met antwoorden. Het doel van dit script is om een ​​manier te creëren om de weergave van de antwoorden per individuele vraag te schakelen. Ik heb het al aan de praat gekregen om alle antwoorden voor alle vragen in te schakelen, maar zou graag een schonere oplossing willen.
toegevoegd de auteur Michael Davis, de bron
@amit_g - Kun je dit een beetje uitbreiden? Dus ik neem aan dat ik dan mijn script niet alleen zou laten zoeken naar een klik op de .class_name, maar ook naar de overeenkomende id in het aangepaste data-attribuut? Ik weet niet zeker hoe ik dit onderdeel moet schrijven.
toegevoegd de auteur Michael Davis, de bron
Oeps, ik bedoelde @Inerdia in de opmerking hierboven.
toegevoegd de auteur Michael Davis, de bron
@zerkims - Ik heb enkele wijzigingen aangebracht en geverifieerd dat de js-variabelen de juiste tekenreeks bevatten. Ik heb de vraag bijgewerkt om de nieuwste variant van het script te laten zien, maar werkt nog steeds niet.
toegevoegd de auteur Michael Davis, de bron
@Inerdia - Bedankt voor de demo van jsfiddle. Ik was in staat om dat te nemen en het in mijn oplossing te implementeren. Lijkt op deze manier veel efficiënter. Ik had in eerste instantie een probleem met het ".on" -object (?) Dus moest ik .on ("klik", function() veranderen in .click (function (). Ik denk dat het komt omdat WP jq 1.7 niet bevat en toch wilde ik voorkomen dat de plug-in gedwongen wordt om een ​​specifieke versie van jQuery aan te roepen. Het werkt echter prima, dank je!
toegevoegd de auteur Michael Davis, de bron

2 antwoord

in plaats van

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

proberen

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

merk op dat als u meerdere schakelaars en antwoorden op uw pagina heeft, een toggleC-klik met tooggle alle antwoorden. Ga als volgt te werk om alleen antwoorden in te stellen die bij het antwoord op de klik horen:

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

tot slot merk je op dat je de id in de klasse (transversability, yada yada) niet hoeft toe te voegen, en dat je iets als

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

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

2
toegevoegd
als u uw vraag kunt bewerken en een beetje html kunt toevoegen, inclusief toogleC en answerC, zou dit ons enorm kunnen helpen;)
toegevoegd de auteur roselan, de bron
Uw suggestie voor het benoemen van de klasse in de functie is correct en ik heb die parsen geverifieerd naar de juiste id. Maar ik heb alle drie de varianten geprobeerd met de herwerkte code hierboven, maar hoewel ik geen fouten krijg, wordt de inhoud ook niet weergegeven zoals zou moeten. Ik realiseer me dat de oorspronkelijke vraag is beantwoord, dus ik zal dit waarschijnlijk naar een nieuw onderwerp brengen, maar meer ideeën zouden zeer op prijs worden gesteld.
toegevoegd de auteur Michael Davis, de bron
Ik had daar gisteravond over nagedacht, maar besefte dat je antwoord mijn OP had opgelost, dus in plaats daarvan nam ik het laatste nummer mee naar een nieuwe functie. Bleek dat ik gewoon alles in een document.ready-functie moest stoppen en alles werkte. Nogmaals bedankt voor het nemen van de tijd om mij te helpen!
toegevoegd de auteur Michael Davis, de bron

Als antwoordtafel- * ID * en antwoordenC * ID * klassen zijn die aan bepaalde HTML-elementen worden toegeschreven, probeert u dit:

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

jQuery('.answer-table-'+qrow_id).click(function() {
      jQuery('.answersC'+qrow_id).slideToggle('fast');
});
0
toegevoegd
Het is dezelfde code eigenlijk met dezelfde fout
toegevoegd de auteur zerkms, de bron
Goed gespot, maar ik neem aan dat $ qrow-> id een getal is. Bovendien zit het probleem in JavaScript. Als antwoordenC * ID * een klasse is, moet hij een punt toevoegen in jQuery ('answersC' + toggleC) .slideToggle ('fast'); .
toegevoegd de auteur alexpirine, de bron