文字サイズ変更ボタンを実装したい。（参考URLあり）

こちらを参考に、
文字サイズ変更ボタンを実装しましたがうまく行きません・・・。
ボタンは「小」「中」「大」の３つ。
そもそもボタンが押せるようになりません。
ご教授いただけないでしょうか。
よろしくお願い致します。

html
1<div id="memo" class="sizeM">
2      <p>この文字のサイズを<br>
3        サイズ変更ボタンで<br>
4        変更させたいのです</p>
5</div>
6    
7
8<ul id="fontChange">
9  <li id="sizeS">小</li>
10  <li id="sizeM">中</li>
11  <li id="sizeL">大</li>
12</ul>

CSS
1.sizeS {
2	font-size: 14px;
3}
4
5.sizeM {
6	font-size: 16px;
7}
8
9.sizeL {
10	font-size: 18px;
11}

<!-- jQuery -->
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.cookie.js"></script>
<script>
jQuery(function($){
    //変数にクッキー名を入れる
    var history = $.cookie('fontSize');
	
    //適用する箇所を指定。
    var elm = $('#memo');
	
    //変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
    (!history)? elm.addClass('fontM'):elm.addClass(history);
	
    //クリックしたら実行
    $('#fontChange li').click(function(){
	
        //クリックした要素のID名を変数にセット
        var setFontSize = this.id;
	    
        //クッキーに変数を保存
    	$.cookie('fontSize', setFontSize);
		
        //一度classを除去して、変数をclassとして追加
        elm.removeClass().addClass(setFontSize);
    });
});
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

harebareyukaiさんが掲載しているコードをコピペして動かしてみましたがそのままで動きました。
プラグインとjQueryへのパスのみ同じディレクトリに設置したので変更したましたがそのほかはインデント整形等もしていません。
記述方法に間違いがあるか、パスが間違っているか、ダウンロードするファイルを間違っていると思われます。
下記のコードをコピペして、ダウンロードしたものを同じディレクトリに移動してテストをしてみて下さい。
それでも動かない場合はダウンロードしたファイルが違うものをダウンロードした可能性があるのでダウンロード先のリンクを記載して下さい。
間違っていないかテストしてみます|ーﾟ)

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<style>
6.sizeS {
7    font-size: 14px;
8}
9
10.sizeM {
11    font-size: 16px;
12}
13
14.sizeL {
15    font-size: 18px;
16}
17</style>
18<!-- jQuery -->
19<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
20<script type="text/javascript" src="jquery.cookie.js"></script>
21<script>
22jQuery(function($){
23    //変数にクッキー名を入れる
24    var history = $.cookie('fontSize');
25
26    //適用する箇所を指定。
27    var elm = $('#memo');
28
29    //変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
30    (!history)? elm.addClass('fontM'):elm.addClass(history);
31
32    //クリックしたら実行
33    $('#fontChange li').click(function(){
34
35        //クリックした要素のID名を変数にセット
36        var setFontSize = this.id;
37
38        //クッキーに変数を保存
39        $.cookie('fontSize', setFontSize);
40
41        //一度classを除去して、変数をclassとして追加
42        elm.removeClass().addClass(setFontSize);
43    });
44});
45</script>
46</head>
47<body>
48    <div id="memo" class="sizeM">
49        <p>この文字のサイズを<br>
50          サイズ変更ボタンで<br>
51          変更させたいのです</p>
52  </div>
53  
54  
55  <ul id="fontChange">
56    <li id="sizeS">小</li>
57    <li id="sizeM">中</li>
58    <li id="sizeL">大</li>
59  </ul>
60</body>
61</html>

投稿2018/08/08 14:36

退会済みユーザー

総合スコア0

harebareyukai

2018/09/05 09:17

jsの読み込みがうまく行かなかったのか、記述し直すとうまく行ったようです！

行動規範の内容に同意します

１）以下の２つのJavaScriptは読み込みできているか確認してください。

html
1<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
2<script type="text/javascript" src="../jquery.cookie.js"></script>

２）リストタグをblock要素にして要素全体をクリックできるようにしてみてください。

（スタイルシートの例）

stylesheet
1#fontChange li {
2	display:block;
3	width:30px;
4	height:30px;
5	text-align:center;
6}
7#fontChange li:hover {
8	background-color:#333;
9	color:#fff;
10	cursor:pointer;
11}

投稿2018/08/05 10:49

編集2018/08/05 14:03

w2-yamaguchi

総合スコア167

harebareyukai

2018/08/05 13:03

回答どうも有難うございます。１）読み込みは出来ているようでした。２） block要素にすると押せるようになりました！有難うございます。　（inline要素だとクリック出来ない仕様なのでしょうか？） #fontChange li　などの要素の指定の記述が間違っているのか、javaScriptの記述場所が良くないのか・・・；；；

w2-yamaguchi

2018/08/05 14:01

inline要素でもクリック可能です。（文字の部分を正確にクリックしてあげると動作すると思います） liタグなどのinline要素をボタンとして扱う場合は、block要素にするのが一般的です。 ※回答の"block要素にして押せるように"という表現は、inline要素だと押せないような表現となっているため、修正します！すみません。

harebareyukai

2018/08/05 14:06

＞liタグなどのinline要素をボタンとして扱う場合は、block要素にするのが一般的です。確かに、block要素にすることで押せる範囲が広がりますね。勉強になります。ご丁寧に有難うございます。

行動規範の内容に同意します

あなたの回答