switch 语句不接收参数

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');    
});

这是行不通的。图片已更新，但标题未更新，并且始终显示：Title1。

我做了一些测试来看看为什么。我在 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

为了避免冲突，因为变量 number 将是一个字符串。通过在引号中包含大小写值来更改代码，如下所示。

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

Answer 2

match 返回一个数组。

将您的代码更改为：

updateInfo(counter[0]);

此外，变量将以字符串形式出现，因此您需要将 case 变量用引号括起来，例如：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