html - 同一个按钮，每次点击执行另一个功能......如何？

Question

我有一个有多种语言的网站，目前语言栏显示在网站顶部，每种语言都有一个按钮。我更喜欢的是一个按钮，单击一次，按钮图像变为英国国旗标志，并调用英语，再次按下，按钮图像变为法语，调用法语等。

这是一个按钮，多个呼叫可能吗？谁能给我一个开始研究这个的好地方？

Answer 1

对的，这是可能的。你html会看起来像这样：

<button id='changeLang' onclick='changeLang()'></button>

（请记住将其设置为默认值）

和你的 javascript：

    var counter = 0;
    function changeLang(){
       var buttonDetails = document.getElementById('changeLang');
       buttonDetails.innerHTML = "";
       switch(counter){

          case 0:
             buttonDetails.innerHTML = "<img src='unionJack.png' />English";
             counter +=1;
             break;
          case 1:
             buttonDetails.innerHTML = "<img src='frenchFlag.png' />French";
             counter +=1;
             break;
          case 2:
             //continue like above
          default:
             counter = 0;
             changeLang();
   }
}

如果您需要另一种语言，只需将其添加到交换机即可。

或者，将案例代码更改为：

case 0:
   buttonDetails.src = "unionJack.png";
   counter +=1;
   break;

并删除说明buttonDetails.innerHTML = "";您是否想要的只是图像的行。

要调用函数来更改语言，您只需将函数调用添加到您的开关案例之一，如下所示：

case 0:
   buttonDetails.innerHTML = "<img src='unionJack.png' />English";
   counter +=1;
   foo(bar);     //just add your function call
   break;