switchステートメントで画像を切り替える

debugcn 投稿 Dev

クリス

私は最初のプロジェクトを作成しています。

私がやろうとしているのは、switchステートメントを使用して、順序付けされていないリストのナビゲーションバーから画像を切り替えることができるようにすることです。リスト内の各項目専用の関数を簡単に作成できますが、長いリストで作業しているため、コードが不必要に長くなり、Switchステートメントになります。

リストアイテムをクリックするたびに、デフォルトの画像が変更されるはずの画像に変更されません。

これまでの私のコードは次のとおりです。

function changeImage(inobj) {

  switch (inobj) {
    case 'L1':
      document.getElementById('image').src = ['image1.jpg', 'image2.jpg'];
      break;
    case 'L2':
      document.getElementById('image').src = ['image3.jpg', 'image4.jpg'];
      break;
    case 'L3':
      document.getElementById('image').src = ['image5.jpg', 'image6.jpg'];
      break;
    case 'L4':
      document.getElementById('image').src = ['image7.jpg', 'image8.jpg'];
      break;
    case 'L5':
      document.getElementById('image').src = ['image9.jpg', 'image10.jpg'];
      break;
    case 'L6':
      document.getElementById('image').src = ['image11.jpg', 'image12.jpg'];
      break;
    case 'L7':
      document.getElementById('image').src = ['image13.jpg', 'image14.jpg'];
      break;
    case 'L8':
      document.getElementById('image').src = ['image15.jpg', 'image16.jpg'];
      break;
    case 'L9':
      document.getElementById('image').src = ['image17.jpg', 'image18.jpg'];
      break;
    case 'L0':
      document.getElementById('image').src = ['image19.jpg', 'image20.jpg'];
      break;

  }

}

<!-- FIRST GROUP-->
<button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button>
<ul id='parentlist' class="dropdown-menu">
  <li id='list' value='L1' onClick='changeImage()'>LIST1</li>
  <li id='list' value='L2' onClick='changeImage()'>LIST2</li>
  <li id='list' value='L3' onClick='changeImage()'>LIST3</li>
  <li id='list' value='L4' onClick='changeImage()'>LIST4</li>
  <li id='list' value='L5' onClick='changeImage()'>LIST5</li>
</ul>
</div>

<!-- SECOND GROUP-->

<button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button>
<ul id='parentlist' class="dropdown-menu">
  <li id='list' value='L6' onClick='changeImage()'>LIST1</li>
  <li id='list' value='L7' onClick='changeImage()'>LIST2</li>
  <li id='list' value='L8' onClick='changeImage()'>LIST3</li>
  <li id='list' value='L9' onClick='changeImage()'>LIST4</li>
  <li id='list' value='L0' onClick='changeImage()'>LIST5</li>
</ul>
</div>

<center><img src="defaultimage.jpg" id="image" /></center>

私は何を間違えましたか？！あなたの入力は大歓迎です。

ゼドリング

コードには複数の問題がありましたが、一般的なアプローチは問題ありません（初心者向け）

idsは1回しか使用できません。これらは一意の識別子です。複数の要素をグループとして処理する場合は、class代わりに使用してください

imgソースが文字列である、あなたは文字列の配列を割り当てるしようとしていました

クリックされた要素の参照を関数に渡せなかったthisためchangeImage()、;にを追加しました。クリックされた要素を保持します

lisはvalue属性を持つことができず、それは（私が知る限り）入力タイプ専用に予約されているので、私はそれをに置き換えましたdata-value

これdata-xxxは、（私が思うに）任意の要素で使用できる柔軟な属性であり、xxxパーツの代わりに単純な文字列を使用できます。

function changeImage(inobj) {

  switch (inobj.getAttribute('data-value')) {
    case 'L1':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L1';
      break;
    case 'L2':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L2';
      break;
    case 'L3':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L3';
      break;
    case 'L4':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L4';
      break;
    case 'L5':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L5';
      break;
    case 'L6':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L6';
      break;
    case 'L7':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L7';
      break;
    case 'L8':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L8';
      break;
    case 'L9':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L9';
      break;
    case 'L0':
      document.getElementById('image').src = 'http://via.placeholder.com/100?text=L0';
      break;

  }

}

<!-- FIRST GROUP-->
<button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button>
<ul id='parentlist' class="dropdown-menu">
  <li class='list' data-value='L1' onClick='changeImage(this)'>LIST1</li>
  <li class='list' data-value='L2' onClick='changeImage(this)'>LIST2</li>
  <li class='list' data-value='L3' onClick='changeImage(this)'>LIST3</li>
  <li class='list' data-value='L4' onClick='changeImage(this)'>LIST4</li>
  <li class='list' data-value='L5' onClick='changeImage(this)'>LIST5</li>
</ul>
</div>

<!-- SECOND GROUP-->

<button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button>
<ul id='parentlist' class="dropdown-menu">
  <li class='list' data-value='L6' onClick='changeImage(this)'>LIST1</li>
  <li class='list' data-value='L7' onClick='changeImage(this)'>LIST2</li>
  <li class='list' data-value='L8' onClick='changeImage(this)'>LIST3</li>
  <li class='list' data-value='L9' onClick='changeImage(this)'>LIST4</li>
  <li class='list' data-value='L0' onClick='changeImage(this)'>LIST5</li>
</ul>
</div>

<center><img src="http://via.placeholder.com/100?text=default" id="image" /></center>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]