使用 Javascript 和字符串插值更改 html 元素的类

Question

我有一个 ID 为“bigOne”的 HTML 元素。 它的大小由它的类和相关联的 CSS 决定。 类名是“p1”、“p2”、“p3”等，一直到“p100”。

一个页面是一个输入和一个按钮。 我正在尝试创建一个函数，以便当在输入中键入一个数字并单击按钮时，“bigOne”的类将更改为相应的数字，例如，当输入 80 并且单击按钮时，类从“ p50”到“p80”。 在我下面的代码中，我已经能够创建这个确切的场景，但我想要做的是能够输入任何数字并适当地更改类，例如提交 4 创建类 p4 或提交 99 创建类 p99 . 这就是我完全陷入困境的地方。

我确信不需要太多代码，但我就是无法得到它。

<div id="options">
                <label></label>
                <input id="changes" />
                <button id="myButton">Submit</button>
            </div>

            <script type="text/javascript">

                document.getElementById("myButton").onclick=function() {

                    if (document.getElementById("changes").value=="80") {  


                        document.getElementById("bigOne").classList.contains('p50');

                        document.getElementById("bigOne").classList.toggle('p80');

                    }


                }







            </script>

Answer 1

由于您使用 jquery... 标记您的问题：

<script>

   $(function(){
       $('#myButton').click(function(){
           $('#bigOne').removeClass(); //to clean old classes
           //we get the value from the input and add the p class
           $('#bigOne').addClass('p'+$('#changes').val());
       });
    });
</script>

Answer 2

我建议您获取输入数字的元素的值，并将其存储到下面名为“theNewClassName”的字符串中：

var theNewClassName = document.getElementById("elementToTakeValueFrom").innerHTML;
document.getElementById("elementToGiveClassTo").className = theNewClassName; 
//or whatever classname you wanted it to change to

或者

document.getElementById("bigOne").className = "blablabla";

你明白了。