LoginSignup
0

More than 3 years have passed since last update.

ピザのトッピングを視覚化してみたよ

Last updated at Posted at 2019-06-03

はじめに

 トッピングの有無をチェックボックスのクリックだけで済ますのは物足りなかったので、
 視覚的にわかるようにしてみたよ。

 概要

 jQueryを使ってチェックボックスと画像を紐付けてみる。

 imgのクラスをチェックボックスのvalueと同じ名前にしてリンクさせる。

index.html
<div class="checkbox">
  <label><input type="checkbox" name="topping" value="cheese">チーズ</label>
  <label><input type="checkbox" name="topping" value="tomato">トマト</label>
  <label><input type="checkbox" name="topping" value="sarami">サラミ</label>
</div>
<div class="relative">
  <img class="kiji" src="images/kiji.png">
  <img class="cheese" src="images/cheese.png">
  <img class="tomato" src="images/tomato.png">
  <img class="sarami" src="images/sarami.png">
</div>

 セレクタに変数を入れることができるらしいのでval()でvalueを取得し、先頭に.を連結することで
 紐づけ完了。

app.js
$(function(){
  // チェックボックスを押したとき
  $('input[name="topping"]').change(function(){
    // すべてのチェックボックスに対して
    $('input[name="topping"]').each(function(){
      //  チェックがあれば
      if($(this).prop('checked')){
        // 表示
        $("." + $(this).val()).css('display', 'block');
      // チェックがなければ
      }else{
        // 非表示
        $("." + $(this).val()).css('display', 'none');
      }
    });
  });
});

 画像を透過する必要があるのでPEKO STEPというサイトを使ってみた。かなり楽だった。
 

スクリーンショット 2019-06-03 17.44.21.png
               ↓
スクリーンショット 2019-06-03 17.31.29.png

 サラミの脂?を#FFFに指定したので背景色と被り、脂も透過してしまった...
 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0