Question

我正在创建我的第一个项目。

我要做的是能够使用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>

我做错了什么？！非常感谢您的投入。

Answer 1

这是一种不引人注目的简单JS方式来做你想要的事情

我已修复您的重复ID

＆＃13;

window.addEventListener("load", function(event) { // whe page loaded
  document.querySelectorAll("li.list").forEach(function(li) { // all LIs
    li.onclick=function() { // each LI
      var image = "image"+this.getAttribute("data-image")+".jpg";
      console.log(image); // can be removed, only for demonstration
      document.getElementById("image").src = image;
    }
  });
});

＆＃13;

<!-- FIRST GROUP-->
<div>
<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 class="dropdown-menu parentlist">
  <li class='list' data-image='1'>LIST1</li>
  <li class='list' data-image='2'>LIST2</li>
  <li class='list' data-image='3'>LIST3</li>
  <li class='list' data-image='4'>LIST4</li>
  <li class='list' data-image='5'>LIST5</li>
</ul>
</div>

<!-- SECOND GROUP-->
<div>
<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 class="dropdown-menu parentlist">
  <li class='list' data-image='6'>LIST1</li>
  <li class='list' data-image='7'>LIST2</li>
  <li class='list' data-image='8'>LIST3</li>
  <li class='list' data-image='9'>LIST4</li>
  <li class='list' data-image='10'>LIST5</li>
</ul>
</div>

<center><img src="defaultimage.jpg" id="image" /></center>

＆＃13;

如果你想保留＆＃34; L1＆＃34;你可以使用this.getAttribute("data-image").replace("L","")格式

Answer 2

尝试使用此代码在代码段

中仅使用了两个图片

＆＃13;

 function changeImage(inobj) {
            
		
  switch (inobj) {
    case 'L1':
          document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153';
      break;
    case 'L2':
      document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg';
      break;
    case 'L3':
      document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153';
    case 'L4':
      document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg';
      break;
    case 'L5':
      document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153';
      break;
    case 'L6':
      document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg';
      break;
    case 'L7':
      document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153';
      break;
    case 'L8':
      document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg';
      break;
    case 'L9':
      document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153';
      break;
    case 'L0':
      document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg';
      break;

  }

}

＆＃13;

<div>
<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("L1")'>LIST1</li>
  <li id='list' value='L2' onClick='changeImage("L2")'>LIST2</li>
  <li id='list' value='L3' onClick='changeImage("L3")'>LIST3</li>
  <li id='list' value='L4' onClick='changeImage("L4")'>LIST4</li>
  <li id='list' value='L5' onClick='changeImage("L5")'>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("L6")'>LIST1</li>
  <li id='list' value='L7' onClick='changeImage("L7")'>LIST2</li>
  <li id='list' value='L8' onClick='changeImage("L8")'>LIST3</li>
  <li id='list' value='L9' onClick='changeImage("L9")'>LIST4</li>
  <li id='list' value='L0' onClick='changeImage("L0")'>LIST5</li>
</ul>
</div>

<center><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" id="image" /></center>

＆＃13;

Answer 3

你的代码最大的错误是你分配的数组应该是一个字符串，你可以用以下代码修复它：

document.getElementById('image').src = 'image2.jpg';

此外，Id被认为是独一无二的。

如果您希望每次用户点击图像时在两个选项之间切换图像，那么您可以执行以下操作：

function changeImage(inobj) {
    switch (inobj) {
        case 'L1':
            document.getElementById('image').src = document.getElementById('image').src == 'image1.jpg' ? 'image2.jpg' : 'image1.jpg';
            break;

如果您为每个li分配一个唯一的ID，您可以使事情更有趣，并让该功能接收ID，因此您不需要切换。将id设为L1，L2，......：

function changeImage(imageId) {
    imageNumber = imageId.substr(1);
    nextImageNumber = n % 2 == 0 ? imageNumber - 1 : imageNumber + 1
    document.getElementById('imageId').src = 'image' + nextImageNumber + '.jpg';
}

Answer 4

代码存在多个问题，但一般方法很好（适合初学者）

您只能使用id次;它们是唯一标识符，如果您想将多个元素作为一个组处理，请使用class代替

img源是一个字符串，您试图分配一个字符串数组

您未能将点击的元素的引用传递给该函数，这就是我将this添加到changeImage()的原因;这将保持点击的元素

li s不能有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>

使用switch语句切换图像

4 个答案: