如何使用變量內容作爲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類的名稱。如何使用變量內容作爲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解決方案方面非常擅長，但我對此知之甚少，所以很難理解如何在他們不工作時擴展它們。

如果我現在是這樣的代碼：（注意，我從班切換到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>

我可以螢火看到變量內容的ID匹配在HTML和我越來越沒有錯誤,但它仍然沒有什麼。

在其他地方，我使用了以下功能來顯示所有答案全部問題：

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

這一個完美的作品，只是我真的只想對每個問題的基礎上開放的答案。

注意：'$'與'jQuery'的區別只是因爲一個包裝函數中的.js文件允許WordPress中的'$'，不工作的僅僅是頁面源代碼在此刻。非常感謝大家的投入！

UPDATE（終）：

任何人誰在搜索中遇到這個問題，我會發布最終的工作代碼。還有一個問題需要將所有內容都包裝在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>

來源

2011-11-12 Michael Davis

您是否嘗試過查看此代碼評估的結果？你的字符串變量只是沒有引號。 – zerkms

我會推薦一種不涉及生成Javascript的方法。在你的情況下，我會給所有的切換按鈕相同的CSS類（例如'toggle'），並給他們在HTML數據屬性中切換的元素的ID。 – millimoose

在大多數情況下，您不需要編寫如此多的點擊處理程序。 jQuery有很棒的選擇器，你可以寫一個處理器來處理所有類似的HTML標籤。發佈典型的呈現HTML，我們將能夠幫助您編寫該處理程序。 –

，而不是

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

嘗試

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

請注意，如果您的網頁上有多個切換和答案，請撥一個toggleC點擊全部答案。要切換屬於點擊答案只使用答案：

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

最後要注意，你並不需要添加的ID在類（transversability，內容十分重要），而且你可以使用類似

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

爲了創建只有一個事件處理程序，而不是「行數」。（但這不是很重要）

來源

2011-11-12 01:23:20 roselan

關於如何在函數中命名類的建議是正確的，並且我已驗證解析爲正確的id。但我已經嘗試了上述重做代碼的所有三種變體，但即使我沒有得到任何錯誤，它也不會像它應該顯示的內容。我意識到原來的問題已經得到解答，所以我可能會把這個問題帶到一個新的線索，但是任何更多的想法都將不勝感激。 –

如果你可以編輯你的問題，並添加一些html包括toogleC和answerC，它將幫助我們極大地幫助你;） – roselan

我昨天晚上已經想過了，但是意識到你的回答已經解決了我的OP，最後一個問題發佈到一個新的職位。原來我只需要將所有內容都包裝在一個document.ready函數中，並且它都可以工作。再次感謝您花時間幫助我！ –

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

來源

2011-11-12 01:19:14 alexpirine

它是**相同的**代碼實際上有相同的錯誤 – zerkms

好吧，但我認爲'$如果'answersC * ID *'是一個類，他應該在jQuery中添加一個點（'answersC'+ toggleC）.slideToggle（'fast'）。 ;'。 – alexpirine

如何使用變量內容作爲CSS類名？

回答

相關問題