通过wordpress中的自定义JS单击后更改切换的背景颜色

时间:2018-02-02 10:14:35

标签: javascript css wordpress

我目前正在尝试将自定义JS功能(通过Live Code Editor插件)添加到我的wordpress网站。目标是在点击后改变切换的背景颜色(即从红色 - >绿色)。我已经尝试过这个函数但是虽然选择器适用于CSS,但JS函数不起作用:

CSS:

\23 toggle-id-1 { background-color: red; }

JS:

var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");

\23 toggle-id-1.onclick = function(){ \23 toggle-id-1.style.backgroundColor = "green"; }

在JSFiddle中,这没有任何问题,这个插件有什么不同吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

jQuery解决方案:



    $("#toggle-id-1").click(function () {
       $(this).toggleClass("green");
    });

    #toggle-id-1 {
        background-color: red;
        height: 100px;
        width: 100px;
    }
            
     #toggle-id-1.green { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle-id-1" class=""></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

变量名中不能包含空格。将变量命名为其他内容。