Комбинация Wordpress JS CSS не работает, и я не знаю, почему

avatar
Yu-Jin Lim
8 апреля 2018 в 01:55
44
3
0

У меня есть страница в теме 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 в папку JS в своем wordpress. 

$("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-скрипте и понятия не имею, что не так с моим кодом. Любая помощь очень ценится.

Я проверил похожие сообщения, и они указали, что это должно работать. Есть ли что-то, чего мне не хватает?

Источник
Andrew Schultz
8 апреля 2018 в 02:52
0

Сначала проверьте консоль браузера на наличие ошибок javascript.

Funk Forty Niner
9 апреля 2018 в 18:13
0

и статус этого вопроса.......... ?

Ответы (3)

avatar
Johannes
8 апреля 2018 в 23:07
1

Как писал @Andrew Schultz, вам нужно определить правила CSS для классов с предшествующей точкой, и ваш выбор jQuery элемента ID должен включать символ #.

Кроме того, вы, очевидно, хотите переключить цвет фона и размер шрифта для всей страницы (не для нажатой кнопки), поэтому ваш jQuery не должен адресовать this, но либо html или элемент body — в зависимости от того, где вы определили исходный цвет фона и размер шрифта. Итак, если это было сделано для body, ваш jQuery должен быть примерно таким: 

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

(и аналогично для других кнопок)

примечание: в размещенном вами HTML-коде отсутствовал закрывающий код </tr> — я добавил его при редактировании.

avatar
Scaramouche
8 апреля 2018 в 03:14
2

Не поймите неправильно, попробуйте сначала выполнить несколько базовых упражнений, чтобы познакомиться с тем, как работают классы 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>
avatar
Andrew Schultz
8 апреля 2018 в 03:01
1

Проблема в том, что вам нужно определить классы с точкой перед таким именем в вашей таблице стилей.

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

Кроме того, в вашем селекторе jQuery отсутствует символ решетки для идентификатора элемента перед именами изображений.

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