配列のキーをhtmlのクラス名にしたとき、特定のクラスだけクリック処理をしたい

Question

配列の、キーを<li>のクラス名に、バリューを<span>の色にしています。

$('キー').on('click', function () { });
上記のように、指定のクラス名をクリックしたときに動きをつけたいのですが、どのように記述して良いのかわかりません。

ご教授いただけないでしょうか？

<ul class="color_list"></ul>

  <style>
    .color_list li span {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 100%;
    }
  </style>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script>
    const color_list = {
      red: '#f00',
      green: '#0f0',
      blue: '#00f'
    };
    $(function () {
      $.each(color_list, function (key, value) {
        $('ul.color_list').append('<li class="' + key + '"><span style="background:' + value + '; "></span></li>');
      });
    });
  </script>

Comments

[yambejp]

「動きをつけたい」とはなんでしょう？

Answer 1

appendメソッドは要素を追加したい元の要素のjQueryオブジェクトを返すので、それを利用し、下記のようなメソッドチェーンが組めます。

$('ul.color_list').append('<li class="' + key + '"><span style="background:' + value + '; "></span></li>')
  .children('.' + key).click(function(){
  // 処理
  console.log(this); // 追加したli要素が出力される
});