-1

Web ページのフォント サイズを変更しようとしています。私は3つのサイズを指定しました：

  • 小さな
  • 中くらい
  • 大きい

ユーザーがクリックした内容に基づいて、html フォント サイズが選択したサイズになります。

#small、#med、#largeは 3 つの段落要素です。

medium、、、 CSSsmallのlarge3 つのクラスです。

私のコードは次のとおりです。

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>

完全に機能しているとは思いません。したがって、誰かが私が間違っている場所を示すことができれば、非常に役立ちます。

4

2 に答える 2

1

あなたは少し冗長です。クリックごとに決定する必要はありません。常に他の2つのクラスのいずれかを削除し、押したボタンから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"));
    });
});
于 2013-03-05T01:10:31.313 に答える
0

もう少しコンパクトな方法は、以下のようにクラスを結合することです。

$(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");
    });
});
于 2013-03-05T01:14:53.160 に答える