冗長なコードを簡潔にまとめたい。

Question

作成中のサイトで、ラジオボタンのクリックで画像を切り替えたいため、こちらのサイトを参考にして以下のように書きました。

<div class="temp-image">
  <div class="temp-image-box" id="temp-image-A">
    <div class="temp-image-box-top">
      <img src="https://placehold.jp/bfbfbf/ffffff/150x150.png?text=%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84" name="lftemp1">
    </div>

    <div class="typeA-radio colorradio">
      <p class="select-read-text">カラーをお選びください</p>
      <div class="color-radio-box">
        <label class="radio-color-red">
          <input type="radio" name="lftemp1" onclick="showimgA1()" value="赤" class="radioreset">
          <span>赤</span>            
        </label>
        <label class="radio-color-blue">
          <input type="radio" name="lftemp1" onclick="showimgA2()" value="青" class="radioreset">
          <span>青</span>
        </label>
        <label class="radio-color-green">
          <input type="radio" name="lftemp1" onclick="showimgA3()" value="緑" class="radioreset">
          <span>緑</span>
        </label>
        <label class="radio-color-pink"><input type="radio" name="lftemp1" onclick="showimgA4()" value="ピンク" class="radioreset">
          <span>ピンク</span> 
        </label>
        <label class="radio-color-orange"><input type="radio" name="lftemp1" onclick="showimgA5()" value="オレンジ" class="radioreset">
          <span>オレンジ</span>
        </label>
      </div>
    </div>
  </div>

  <div class="temp-image-box" id="temp-image-B">
    <div class="temp-image-box-top">
      <img src="https://placehold.jp/bfbfbf/ffffff/150x150.png?text=%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84" name="lftemp2">
    </div>

    <div class="typeB-radio colorradio">
      <p class="select-read-text">カラーをお選びください</p>
      <div class="color-radio-box">
        <label class="radio-color-red"><input type="radio" name="lftemp2" onclick="showimgB1()" value="赤" class="radioreset">
          <span>赤</span>
        </label>
        <label class="radio-color-blue">
          <input type="radio" name="lftemp2" onclick="showimgB2()" value="青" class="radioreset">
          <span>青</span>
        </label>
        <label class="radio-color-green">
          <input type="radio" name="lftemp2" onclick="showimgB3()" value="緑" class="radioreset">
          <span>緑</span>
        </label>
        <label class="radio-color-pink">
          <input type="radio" name="lftemp2" onclick="showimgB4()" value="ピンク" class="radioreset">
          <span>ピンク</span>
        </label>
        <label class="radio-color-orange">
          <input type="radio" name="lftemp2" onclick="showimgB5()" value="オレンジ" class="radioreset">
          <span>オレンジ</span>
        </label>
      </div>
    </div>
  </div>

  <div class="temp-image-box" id="temp-image-C">
    <div class="temp-image-box-top">
      <img src="https://placehold.jp/bfbfbf/ffffff/150x150.png?text=%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84" name="lftemp3">
    </div>

    <div class="typeC-radio colorradio">
      <p class="select-read-text">カラーをお選びください</p>
      <div class="color-radio-box">
        <label class="radio-color-red"><input type="radio" name="lftemp3" onclick="showimgC1()" value="赤" class="radioreset">
          <span>赤</span>
        </label>
        <label class="radio-color-blue">
          <input type="radio" name="lftemp3" onclick="showimgC2()" value="青" class="radioreset">
          <span>青</span>
        </label>
        <label class="radio-color-green">
          <input type="radio" name="lftemp3" onclick="showimgC3()" value="緑" class="radioreset">
          <span>緑</span>
        </label>
        <label class="radio-color-pink">
          <input type="radio" name="lftemp3" onclick="showimgC4()" value="ピンク" class="radioreset">
          <span>ピンク</span>
        </label>
        <label class="radio-color-orange"><input type="radio" name="lftemp3" onclick="showimgC5()" value="オレンジ" class="radioreset">
          <span>オレンジ</span>
        </label>
      </div>
    </div>
  </div>
</div>

//テンプレートA
function showimgA1(){
  document.lftemp1.src = "https://placehold.jp/e93535/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97A%E8%B5%A4";
}

function showimgA2(){
  document.lftemp1.src = "https://placehold.jp/4644ca/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97A%E9%9D%92";
}

function showimgA3(){
  document.lftemp1.src = "https://placehold.jp/44ca6c/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97A%E7%B7%91";
}

function showimgA4(){
  document.lftemp1.src = "https://placehold.jp/ff9eb6/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97A%E3%83%94%E3%83%B3%E3%82%AF";
}

function showimgA5(){
  document.lftemp1.src = "https://placehold.jp/ffa052/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97A%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8";
}


//テンプレートB
function showimgB1(){
  document.lftemp2.src = "https://placehold.jp/e93535/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97B%E8%B5%A4";
}

function showimgB2(){
  document.lftemp2.src = "https://placehold.jp/4644ca/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97B%E9%9D%92";
}

function showimgB3(){
  document.lftemp2.src = "https://placehold.jp/44ca6c/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97B%E7%B7%91";
}

function showimgB4(){
  document.lftemp2.src = "https://placehold.jp/ff9eb6/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97B%E3%83%94%E3%83%B3%E3%82%AF";
}

function showimgB5(){
  document.lftemp2.src = "https://placehold.jp/ffa052/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97B%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8";
}

//テンプレートC
function showimgC1(){
  document.lftemp3.src = "https://placehold.jp/e93535/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97C%E8%B5%A4";
}

function showimgC2(){
  document.lftemp3.src = "https://placehold.jp/4644ca/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97C%E9%9D%92";
}

function showimgC3(){
  document.lftemp3.src = "https://placehold.jp/44ca6c/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97C%E7%B7%91";
}

function showimgC4(){
  document.lftemp3.src = "https://placehold.jp/ff9eb6/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97C%E3%83%94%E3%83%B3%E3%82%AF";
}

function showimgC5(){
  document.lftemp3.src = "https://placehold.jp/ffa052/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97C%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8";
}

codepen→ https://codepen.io/fushimi/pen/WNMNmOq

サンプルのコードでは最初の画像は1つで、選択肢も3つなので大して長くは感じませんが、今回の場合最初の時点で画像が3つ、更にそれぞれに選択肢も5つずつあるため、jsのコードが冗長で美しくないものになってしまっていると感じます。こちらをもっとコンパクトに、かつ例えば更に画像が増えた場合などのためにも汎用性が高いコードにしたいのですが、Javascriptへの理解が浅く、どのように書き換えることができるのかも分からない状態です・・・自分ならこうする、など、何かアドバイスいただけると嬉しいです。よろしくお願いします。

Answer 1

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  let type;
  if(t.matches('[type="radio"]') && (type=t.closest('[data-type]')?.dataset.type)){
    const img=t.closest('[data-type]').querySelector('img');
    const usp=new URLSearchParams();
    usp.append('text',type+t.dataset.text);
    const src=`https://placehold.jp/${t.dataset.color}/ffffff/150x150.png?${usp.toString()}`
    img.src=src;
  }
});
</script>
<div data-type="タイプA">
<div>
<img src="https://placehold.jp/bfbfbf/ffffff/150x150.png?text=%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84">
</div>
<label><input type="radio" name="lftemp1" data-text="赤" data-color="e93535">赤</label>
<label><input type="radio" name="lftemp1" data-text="青" data-color="4644ca">青</label>
<label><input type="radio" name="lftemp1" data-text="緑" data-color="44ca6c">緑</label>
<label><input type="radio" name="lftemp1" data-text="ピンク" data-color="ff9eb6">ピンク</label>
<label><input type="radio" name="lftemp1" data-text="オレンジ" data-color="ffa052">オレンジ</label>
</div>
<div data-type="タイプB">
<div>
<img src="https://placehold.jp/bfbfbf/ffffff/150x150.png?text=%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84">
</div>
<label><input type="radio" name="lftemp2" data-text="赤" data-color="e93535">赤</label>
<label><input type="radio" name="lftemp2" data-text="青" data-color="4644ca">青</label>
<label><input type="radio" name="lftemp2" data-text="緑" data-color="44ca6c">緑</label>
<label><input type="radio" name="lftemp2" data-text="ピンク" data-color="ff9eb6">ピンク</label>
<label><input type="radio" name="lftemp2" data-text="オレンジ" data-color="ffa052">オレンジ</label>
</div>
<div data-type="タイプC">
<div>
<img src="https://placehold.jp/bfbfbf/ffffff/150x150.png?text=%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84">
</div>
<label><input type="radio" name="lftemp3" data-text="赤" data-color="e93535">赤</label>
<label><input type="radio" name="lftemp3" data-text="青" data-color="4644ca">青</label>
<label><input type="radio" name="lftemp3" data-text="緑" data-color="44ca6c">緑</label>
<label><input type="radio" name="lftemp3" data-text="ピンク" data-color="ff9eb6">ピンク</label>
<label><input type="radio" name="lftemp3" data-text="オレンジ" data-color="ffa052">オレンジ</label>
</div>

Comments

[Fushi_me]

確認が遅くなってしまい申し訳ございません。
data属性でsrcも書き換えられるの、すごくいいですね・・・！コードもとても短くスマートになりましたし、もし更に選択肢を追加したい時もhtmlを書き足すだけで良いのは非常に助かります。こういう風にできたらな・・・とぼんやり考えていたことが実現できるコードで、大変勉強になりました。ありがとうございました！

Answer 2

• <input type=radio> に、対応する画像URLを data-image 属性として足す。
• <input type=radio> の onclick 属性と呼んでいる関数をすべて消す。
• 以下のようなコードを足す

document.addEventListener('change', e => {
  if (e.target.matches('*[name][data-image]')) {
    document[e.target.name].src = e.target.dataset.image;
  }
});

Comments

[Fushi_me]

確認が遅くなってしまい申し訳ございません。
data属性を使うことでこんなに短くスマートなコードで実装できるのですね。追加・編集する際も、htmlの書き換えだけで済むのはとても助かります。大変勉強になるご回答をありがとうございました・・・！

Answer 3

function showimg関数を画像の数だけ作るのではなく、関数に渡す引数で処理を分岐させるのはどうでしょうか？
function showing(id) {
if (id === 1) {
document.lftemp1.src = "https://placehold.jp/e93535/ffffff/150x150.png?text=%E3%82%BF%E3%82%A4%E3%83%97A%E8%B5%A4";
}
}

これならABCそれぞれのグループを関数で分けることができ、その中でどれがクリックされたかで表示する画像を判別することもできます

Comments

[Fushi_me]

確認が遅くなってしまい申し訳ございません。
それぞれのグループを関数で分けることができると、それだけでとても見やすく、何度も関数を書いていた以前のコードよりも格段にわかりやすくなりました。引数での条件分岐について、もっと勉強したいと思います。大変参考になるご回答をありがとうございました・・・！

[退会済みユーザー]

他の皆様のコードが分かりやすく自分も勉強になりました！