javascript - 如何使用带有特殊字符的switch

假设我有这样的按钮:

<button>&divide;</button>

我想将 switch 运算符与字符串变量一起使用。

<!DOCTYPE html> 
<html lang="en">
<head>      
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>     
    <script type="text/javascript">

$(document).ready(function()
{  
  $("button").click(function(){
      var value=$(this).text();
      console.log(value);
    switch(value){

      case "÷":
         alert("OK");
         break;
      case "&divide;":
         alert("OK");
         break;
    }
  });   

}
);

    </script>   
</head>
<body>
<button>&divide;</button>
</body>
</html>

但是这些警报都没有出现在按钮 click.console.log() 上，显示:

"÷"

我的浏览器 - firefox 39.0。

最佳答案

考虑到Html Node Text并不总是安全的事实来源...一个好的选择是放置一些属性来为您提供所需的信息，并仅使用 View 来进行数据呈现...

function CheckBtnTextCtrl($) {
  let 
    $btns = $('button')
  ;
  
  function smartTextSanitization(text) {
    let decoder = document.createElement('textarea');
    decoder.innerHTML = text;
    
    return decoder.value;
  }
  
  function onBtnClick(event) {
    let 
      $btn = $(this),
      $btnText = $btn.text(),
      text = smartTextSanitization($btnText)
    ;
    
    switch(text) {
      case "÷":      
        console.log('it is division');
        break;
    }
  }
  
  $btns.click(onBtnClick);
}

jQuery(document).ready(CheckBtnTextCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>&divide;</button>

<小时/>

好方法(我认为):

function CheckBtnCtrl($) {
  const ACTION_TYPES = {
    "SUM": 1,
    "DIVIDE": 2
  };
  
  let $btns = $('button');
  
  function onBtnClick(event) {
    let 
      $btn = $(this),
      action = $btn.data('actiontype')
    ;
    
    switch(action) {
      case ACTION_TYPES.SUM:
        console.log('ok, we need to sum values');
        break;
        
      case ACTION_TYPES.DIVIDE:
        console.log('ok, we need to divide values');
        break;
    }
  }
  
  $btns.click(onBtnClick);
}
jQuery(document).ready(CheckBtnCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-actiontype="2">&divide;</button>

关于javascript - 如何使用带有特殊字符的switch，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38773787/

javascript - 如何使用带有特殊字符的switch

上一篇：javascript - Webpack - 如何识别某些包并将其从渲染中排除？

下一篇：javascript - 渲染前的 React 实例