javascript/jquery 根据输入到文本输入字段中的值更改 html 元素

Question

这听起来很简单，但我是 Javascript 的新手，我很难找到/创建这个脚本。我有一个信用卡 BIN 编号列表，我试图获取卡号字段的前 6 位数字并检查它是什么类型的卡，然后根据输入的 BIN 在屏幕上显示适当的卡 Logo 。

我已经能够创建一个非常简单的脚本来检查输入并可以更改值或元素，但我还没有想出如何做相反的事情。如果用户删除卡片并重新输入卡片信息，我需要能够删除卡片 Logo 并替换它。

这是一个非常简单的演示。 http://jsfiddle.net/6HmxM/653/

$( "input" )

  .keyup(function() {
  if ($( "input" ).val() == 45) {
      var val = "Visa";
  } 
  $( "p" ).text( val )
})

Answer 1

在这种情况下，最好使用 switch 来打印默认值，它可能是空白的。只需设置每个案例以打印出您想要的内容，否则它将默认为 default: 中定义的任何内容。

$( "input" )

  .keyup(function() {

      var $value = $(this).val(),
          output = "";

      switch( $value ) {

          case "45" :
              output = "Visa";
          break;

          case "44" :
              output = "Mastercard";
          break;

          default:
              output = "Nothing";
              break;


      }

      $( "p" ).text( output )
  })

例子: http://jsfiddle.net/6HmxM/655/

虽然，如果您要基于前 6 个字符，您可能必须对 switch 进行调整，可能是匹配前六个的正则表达式，因为 output 将什么都没有，除非每个击键都完全匹配。在这种情况下，您可能需要这样的东西:

$( "input" )

  .keyup(function() {

      var $value = $(this).val(),
          output = "";

      switch( true ) {

          case /4567/.test($value) :
              output = "Visa";
          break;

          case /4412/.test($value) :
              output = "Mastercard";
          break;

          default:
              output = "Nothing";
          break;

       }

      $( "p" ).text( output )
  })

例子: http://jsfiddle.net/6HmxM/656/