jquery - 使用 jquery 添加/删除类

Question

我正在尝试更改网页的字体大小。我指定了三种尺寸：

• 小的
• 中等的
• 大的

根据用户点击的内容，html 字体大小应该成为他选择的大小。

#small, #med,#large是三个段落元素。

medium, small,large是 CSS 的三个类。

我的代码是：

enter code here



<script>
                $(document).ready(function(){
                    $("#small").click(function(){
                        if($("p").hasClass('large'))
                        {
                         $("p").removeClass("large").addClass("small");
                        }
                        else
                        {
                            $("p").removeClass("medium").addClass("small");
                        }
                        });
                    $("#med").click(function(){
                        if($("p").hasClass('small'))
                        {
                            $("p").removeClass("small").addClass("medium");

                        }
                        else
                        {
                            $("p").removeClass("large").addClass("medium");
                        }

                    });

                    $("#large").click(function(){
                        if($("p").hasClass('small'))
                        {
                            $("p").removeClass("small").addClass("large");
                        }
                        else
                        {
                            $("p").removeClass("medium").addClass("large");
                        }

                    });


                });
            </script>

我认为它的工作并不完美。因此，如果有人能指出我哪里出错了，那将会有很大的帮助。

Answer 1

你有点冗长，每次点击都不需要任何决定，你总是必须删除其他两个类中的任何一个，然后从你按下的按钮中添加一个

$(document).ready(function(){
    $("#small").click(function(){
        $("p").removeClass("medium").removeClass("large").addClass("small");
    });
    $("#med").click(function(){
        $("p").removeClass("small").removeClass("large").addClass("medium");
    });
    $("#large").click(function(){
        $("p").removeClass("small").removeClass("medium").addClass("large");
    });
});

您可以通过使用id类似以下内容的变量来进一步“压缩”它（请注意，可点击元素是“#med”，类是“medium”，因此需要额外的工作）

$(document).ready(function(){
    $("#small,#med,#large").click(function(this){
        $("p").removeClass().addClass($(this).attr("id"));
    });
});

Answer 2

更紧凑的方法是将类组合如下：

$(document).ready(function(){
    $("#small").click(function(){
        $("p").removeClass("medium large").addClass("small");
    });
    $("#med").click(function(){
        $("p").removeClass("small large").addClass("medium");
    });

    $("#large").click(function(){
        $("p").removeClass("small medium").addClass("large");
    });
});