Wordpress JS CSS組合不起作用，我也不知道為什么

Question

我有一個關於wordpress 27主題的頁面。

在頁面頂部，我為用戶創建了一個欄，用於切換字體大小和背景顏色。 見酒吧圖片

我上面的代碼如下：

<table>
 <tbody>
  <tr>
   <td>Change Background</td>
   <td><img id="button_colour_yellow" class="aligncenter size-full wp-image-2080" src="Colour-FFFFDB.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_red" class="aligncenter size-full wp-image-2079" src="Colour-FFCCFF.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_blue" class="aligncenter size-full wp-image-2078" src="Colour-E6FFFF.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_green" class="aligncenter size-full wp-image-2077" src="Colour-CCFFCC.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_black" class="size-full wp-image-2076" src="Colour-000000.png" alt="Colour 000000" width="28" height="28" /></td>
   <td></td>
  </tr>
 </tbody>
</table>

要切換背景色，我有一些CSS樣式表

Background_Black{
    background-color: black;
    color: white;   
}

Background_Yellow
{
    background-color: #ffffdb;
    color: black; 
}

Background_Green
{
    background-color: #ccffcc;
    color: black; 
}

Background_Red
{
    background-color: #ffccff;
    color: black; 
}

Background_Blue
{
    background-color: #e6ffff;
    color: black; 
}

你明白了。 我想切換顏色欄，以便當有人單擊圖像時顏色會切換。

因此，我將JS腳本添加到了wordpress中的JS文件夾中。

$("button_colour_black").click(function(){
    $(this).toggleClass("Background_Black");
});

$("button_colour_green").click(function(){
    $(this).toggleClass("Background_Green");
});

$("button_colour_blue").click(function(){
    $(this).toggleClass("Background_Blue");
});

$("button_colour_red").click(function(){
    $(this).toggleClass("Background_Red");
});

$("button_colour_yellow").click(function(){
    $(this).toggleClass("Background_Yellow");
});

問題是，當我單擊圖像時，什么也沒有發生。 :(

拜托，我不是一個優秀的程序員，並且是js腳本的新手，我也不知道我的代碼有什么問題。 非常感謝任何幫助。

我確實檢查了類似的帖子，他們表示這應該可行。 有什么我想念的嗎？

Answer 1

不要用這種錯誤的方式，而是嘗試先解決一些基本的練習，以使您熟悉CSS類和jQuery選擇器的工作方式，這是一個入門的示例。

 $("[id^=button_colour_]").click(function(){ $('#test-area').attr('class', $(this).data('color')); }); 

 .Background_Black{ background-color: black; color: white; } .Background_Yellow { background-color: #ffffdb; color: black; } .Background_Green { background-color: #ccffcc; color: black; } .Background_Red { background-color: #ffccff; color: black; } .Background_Blue { background-color: #e6ffff; color: black; } .test-area{ width: 200px; height: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>Change Background</td> <td><img id="button_colour_yellow" class="aligncenter size-full wp-image-2080" src="Colour-FFFFDB.png" alt="Colour-FFFFDB" width="28" height="28" data-color="Background_Yellow"/></td> <td><img id="button_colour_red" class="aligncenter size-full wp-image-2079" src="Colour-FFCCFF.png" alt="Colour-FFCCFF" width="28" height="28" data-color="Background_Red"/></td> <td><img id="button_colour_blue" class="aligncenter size-full wp-image-2078" src="Colour-E6FFFF.png" alt="Colour-E6FFFF" width="28" height="28" data-color="Background_Blue"/></td> <td><img id="button_colour_green" class="aligncenter size-full wp-image-2077" src="Colour-CCFFCC.png" alt="Colour-CCFFCC" width="28" height="28" data-color="Background_Green"/></td> <td><img id="button_colour_black" class="size-full wp-image-2076" src="Colour-000000.png" alt="Colour 000000" width="28" height="28" data-color="Background_Black" /></td> <td></td> </tbody> </table> <div id="test-area">TEST AREA</div> 

Answer 2

問題在於，您需要在樣式表中用此類名稱之前的句點定義類。

.Background_Green
{
    background-color: #ccffcc;
    color: black; 
}

此外，對於您的jQuery選擇器，它在圖像名稱之前缺少元素ID的哈希符號。

$("#button_colour_black").click(function(){
    $(this).toggleClass("Background_Black");
});

Answer 3

正如@Andrew Schultz所寫，您需要為帶有前一個點的類定義CSS規則，並且您對jQuery所選擇的ID元素需要包含#符號。

此外，您顯然顯然希望切換整個頁面的背景顏色和字體大小（而不是單擊按鈕的字體大小），因此jQuery不應該解決this ，而應該是html或body元素-取決於您定義初始位置的位置背景顏色和字體大小。 因此，如果這是針對body完成的，則您的jQuery需要大致如下所示：

$("#button_colour_black").click(function(){
    $('body').toggleClass("Background_Black");
});

（其他按鈕類似）

注意：您發布的HTML代碼缺少結束</tr>代碼-我在編輯中添加了該代碼。