WordPress JS CSS组合不起作用，我不知道为什么

Question

我在wordpress二十七主题中有一个页面。

在页面顶部，我创建了一个栏供用户切换字体大小和背景颜色。查看酒吧的图像

我的上述代码如下：

<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>代码 - 我在编辑中添加了它。