Question

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

在页面顶部，我创建了一个栏，供用户切换字体大小和背景颜色。 See Image for Bar

我的上述代码如下：

<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规则，并且您对ID元素的jQuery选择需要包含#符号。

此外，您显然想要切换整页的背景颜色和字体大小（不是针对单击的按钮），因此您的jQuery不应该解决this，而是html或body元素 - 取决于您定义初始背景颜色和字体大小的位置。因此，如果这是为body完成的，那么你的jQuery必须大致如下：

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

（和其他按钮类似）

注意：您发布的HTML代码缺少结束</tr>代码 - 我在编辑中添加了该代码。

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

3 个答案: