Javascript indexOf不能返回精确值，有解决方案吗？

Question

请，如何添加多个查询并仅返回确切值？

    if( placeholder.indexOf('Document') != -1 ){
        $(this).addClass('cpf');
    }
    if( placeholder.indexOf("Document B") != -1 ){
        $(this).addClass('cnpj');
    }
    if( placeholder.indexOf("Document A and B") != -1 ){
        $(this).addClass('cpf_cnpj');
    }

如果我的占位符是“文档A和B”，则仅返回类“ cpf_cnpj”，而不返回所有类。

非常感谢！

Answer 1

所以从最具体的if / else if开始

if (placeholder === 'Document A and B') {
  $(this).addClass('cpf_cnpj');
} else if (placeholder.indexOf("Document B") != -1) {
  $(this).addClass('cnpj');
} else { // or else if( placeholder.indexOf('Document') != -1 ){
  $(this).addClass('cpf');
}

Answer 2

您可以尝试使用else...if，然后从较长的字符串开始进行比较：

Demo：

$('input').on('focus', function(){
  var placeholder = $(this).attr('placeholder');
  if( placeholder.indexOf('Document A and B') != -1 ){
    $(this).addClass('cpf_cnpj');
  }
  else if( placeholder.indexOf("Document B") != -1 ){
    $(this).addClass('cnpj');
  }
  else if( placeholder.indexOf("Document") != -1 ){
    $(this).addClass('cpf');
  }
});

input{
  display: block;
  margin-bottom: 10px;
}
.cpf { border: 2px solid red }
.cnpj { border: 2px solid green }
.cpf_cnpj { border: 2px solid blue }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input size="1" type="text" name="form_fields[field_1]" id="form-field-field_1" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Document" maxlength="18">

<input size="1" type="text" name="form_fields[field_1]" id="form-field-field_1" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Document B" maxlength="18">

<input size="1" type="text" name="form_fields[field_1]" id="form-field-field_1" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Document A and B" maxlength="18">