Question

我遇到了switch语句的问题。我在这里简化了一点，但我的项目是一个图片库，当你点击一张图片加载图片。基本的html很简单：

HTML：

<section id="content">    
    <div id="container">    
        <img src="Images/Image1.jpg" id="#image" class="bigImage" />
        <div id="info">Title1</div>  
    </div> <!-- end of container -->    
</section> <!-- end of content -->

图库的html：

<section id="content">
<div id="container">
  <div id="gallery" class="sections">
    <img src="Images/Image1.jpg" class="thumbnails">
    <img src="Images/Image2.jpg" class="thumbnails">
    <img src="Images/Image3.jpg" class="thumbnails">
    etc...
  </div>
</div> <!-- end of content -->
</section> <!-- end of container -->

执行此操作的功能：

$( document ).on('click', '.thumnails', function(e){        
    var imageSource = $(this).attr('src');  
    $( '#container' ).remove();    
    $( '#content').load('index.html' + ' #content', function(){    
        $( '#image' ).attr('src', imageSource);
    }).hide().fadeIn('slow');

});

这一切都很好。现在我想更新具有每张图片标题的#info div的内容。为此，我创建了一个包含switch语句的简单函数：

   function updateInfo(number){
      switch(number) {
        case 1:
          $( '#info').text('Title1');
          break;
        case 2:
          $( '#info').text('Title2');
            break;
        case 3:
          $( '#info').text('Title3');
          break;
        etc...
      }
   }

然后我通过添加对该函数的调用来更新我的原始事件监听器，如下所示：

$( document ).on('click', '.thumbnails', function(e){  
    var imageSource = $(this).attr('src');   
    $( '#container' ).remove();    
    $( '#content').load('index.html' + ' #content', function(){    
        $( '#image' ).attr('src', imageSource);    
        counter = imageSource.match(/\d+/g);
        updateInfo(counter);    
    }).hide().fadeIn('slow');    
});

这不起作用。图像会更新但标题不会显示：标题1。

我做了一些测试，看看原因。我在updateInfo函数中放了一个alert（）语句，如下所示：

function updateInfo(number){
    alert(number);    
    switch(number) {
        case 1:
          $( '#info').text('Title1');
          break;
        case 2:
            $( '#info').text('Title2');
            break;
        case 3:
          $( '#info').text('Title3');
          break;
        etc...
    }
}

这是有效的，这意味着当我点击图片时，在显示该图片之前，我会得到一个警告框，其中包含我点击的图片编号，所以我知道函数正在调用并且参数正在传递。但是当我移动警报（号码）时;其中一个case子句中的语句，如下：

function updateInfo(number){    
    switch(number) {
        case 1:
          $( '#info').text('Title1');
          break;
        case 2:
            alert(number);
            break;
        case 3:
          $( '#info').text('Title3');
          break;
        etc...
    }
}

我没有得到警报框。我仍然是编程的新手，所以这可能是一个基本的错误。谢谢你的时间。

Answer 1

match返回一个数组。

将您的代码更改为：

updateInfo(counter[0]);

此外，变量将以字符串形式出现，因此您需要将您的案例变量用引号括起来，例如：case '1':

function updateInfo(number) {
  switch (number) {
    case "1":
      console.log(1);
      break;
    case "2":
      console.log(2);
      break;
    case "3":
      console.log(3);
      break;
    default:
      console.log('Unrecogised number: ' + number);
      break;
  }
}
var counter = 'Images/Image2.jpg'.match(/\d+/g);
updateInfo(counter[0]); //2

Answer 2

为避免冲突，因为变量号将是一个字符串。通过将案例值包含在如下所示的引号内来更改代码。

 function updateInfo(number){
  switch(number) {
    case '1':
      $( '#info').text('Title1');
      break;
    case '2':
      $( '#info').text('Title2');
        break;
    case '3':
      $( '#info').text('Title3');
      break;
    etc...
  }
 }

切换语句未接收参数

2 个答案: