在输入按钮上使用toggleClass（）更改CSS属性

Question

我有一个红色按钮，我想在单击时将其更改为带有红色轮廓的白色按钮，然后在再次单击时恢复为全红色。 单击后无法更改。 它只是保持红色。

我希望能够使用jquery函数“ toggleClass（）”将具有自定义（背景色）属性的类应用于按钮。 它使用“ .buttonF” CSS属性，但不会应用“ .off” CSS属性，因为看起来该类未通过“ toggleClass（）”打开。

该按钮可切换页面上显示的文本，但这与我的问题无关。

这是我的HTML页面：

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="ryft1.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<head></head>

<script>

function toggleF(button){
    $(this).toggleClass("off"); <!-- Toggle background color by changing class-->

    var f = document.getElementsByClassName("key");
    var i;

    if(document.getElementById("1").name=="OFF"){
        document.getElementById("1").name="ON";
        for(i=0; i<f.length; i++){
            f[i].style.display="block";
        }       
    }

    else if(document.getElementById("1").name=="ON"){
        document.getElementById("1").name="OFF";
        for(i=0; i<f.length; i++){
        f[i].style.display="none";
        }
    }
}

</script>

<body>
<form action="">

<input type="button" class="buttonF" id="1" value="F"
       onclick="toggleF(this);" name="ON">

<p class="key">Sample text</p>

</body>
</html>

这是我的CSS页面：

.buttonF {
    background-color: #ff0000;
    padding: 13px 15px;
    text-align:center;
    font-size: 12px;
    border-radius: 50%;
    border: 2px solid #ff0000;
}

.off{
    background-color: #ffffff
}

Answer 1

您需要在功能中选择按钮。 this不是指向元素，而是指向窗口对象。 你的元素this是从你的函数的参数。

更改此行：

$(this).toggleClass("off");

对此：

$(button).toggleClass("off");

在输入按钮上使用toggleClass（）更改CSS属性

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-01 22:36:12

在输入按钮上使用toggleClass（）更改CSS属性

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-01 22:36:12

解决方案1
0 已采纳 2016-08-01 22:36:12