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”且类为“中等”，因此需要额外的工作）

$(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");
    });
});

使用jquery添加/删除类

2 个答案: