jQueryプラグインの実践をしてみた

こんにちは。ちょっとずつ学習したことを実践して投稿します。

やったこと

jQueryとjavaScriptを使って、
1. 画像をクリックしたら、そのフォントサイズを表示する。
2. ボタンをクリックしたらテキストを取得し表示する

コード

部分的にコードを抜粋します。
index.htmlに画像などいろいろと要素を埋め込んでいきます。
jquery.showsize.jsの方へ画像をクリックした際の動作を埋め込んでいき、外部ファイルとして取得します。

index.html



          <button type="button" name="button">
            <p><img src="img/hoge.jpg"></p>
            <div id="cat1-button"><p id="text-a">click</p></div>
          </button>
          <button type="button" name="button">
            <p><img src="img/hogehoge.jpg"></p>
            <div id="cat2-button"><p id="text-b">click</p></div>
          </button>
          <button type="button" name="button">
            <p><img src="img/hogehogehoge.jpg"></p>
            <div id="cat3-button"><p id="text-c">click</p></div>
          </button>
          <button type="button" name="button">
            <p><img src="img/hogehogehogehoge.jpg" data-size="30"></p>
            <div id="cat4-button"><p id="text-d">click</p></div>
          </button>
        </div>

        </ul>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
          <script src="jquery.showsize.js"></script>


    <script>
      $(function(){
        $('img').showsize({
        });
      });

{
document.getElementById("cat1-button").onclick = function() {
  document.getElementById("text-a").innerHTML = "hoge";
};
}
{
      document.getElementById("cat2-button").onclick = function() {
        document.getElementById("text-b").innerHTML = "hogehoge";
      };
}
{
      document.getElementById("cat3-button").onclick = function() {
        document.getElementById("text-c").innerHTML = "hogehogehoge";
      };
}
{
      document.getElementById("cat4-button").onclick = function() {
        document.getElementById("text-d").innerHTML = "hogehogehogehoge";
      };
}
    </script>
  </div>

jquery.showsize.js

;(function($) {

    $.fn.showsize = function(options) {

        var elements = this;

        elements.each(function() {

            var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
            $(this).click(function() {
                var msg = $(this).width() + ' x ' + $(this).height();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>')
                            .text(msg)
                            .css('position', 'absolute')
                            .css('top', '0')
                            .css('background', 'black')
                            .css('color', getRandomColor())
                            .css('font-size', opts.size + 'px')
                            .css('opacity', opts.opacity)
                            .css('padding', '2px');
                $(this).after(div);
            });
        });

        return this;

    };

    function getRandomColor() {
        var colors = ['white', 'skyblue', 'orange', 'green'];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    $.fn.showsize.defaults = {
        size: 10,
        opacity: 0.9
    };

})(jQuery);

後記

複数のscriptが続く際には、｛｝で括るという初歩的なことが大事だと痛感しました。
このコードをサンプルとしてご自由にご利用ください。