使用jQuery属性选择器实现带空格类名元素显示隐藏失效如何解决？

问题根因 #

你使用的$("a[class='B" + item + "']")属于class属性完全精确匹配选择器，只有当元素的class属性整体字符串和你拼接的内容完全一致时才能命中元素。但你示例中的a标签还包含btn、btn-default、add_row等其他类，永远无法被这个选择器命中，因此显隐逻辑不生效。

同时需要注意：CSS规范中类名不允许包含空格，空格会被自动识别为多个类的分隔符，如果你拼接后的类名带有空格（比如BXXX 01），会被浏览器解析为BXXX和01两个独立的类，用属性匹配也容易出现误判。

解决方案 #

方案1：属性包含匹配（适配带空格的类名场景） #

如果必须用class存储动态标识，把选择器改为*=包含匹配，只要class属性中包含你拼接的完整字符串就会命中：

$(document).on('keyup', ".BenterInput", function() {
  var item = $(this).attr('data-item');
  var num = $(this).val();
  var target = $("a[class*='B" + item + "']");
  if ($.isNumeric(num)) {
    target.show();
  } else {
    target.hide();
  }
  console.log(item + ' ' + num);
});

方案2：自定义属性匹配（更稳妥，推荐） #

完全规避类名空格、其他类干扰的问题，把动态标识存入独立的自定义属性中：

1. 调整HTML部分，给目标a标签新增自定义属性

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="qInDocBXXX"></div>
<input type="text" name="valueToAdd" data-item="XXX" class="BenterInput">
<a class="btn btn-default btn-xs add_row BXXX" data-target-item="XXX" data-but="B" style="display: none;">XXX</a>

2. 调整JS选择器直接匹配自定义属性

$(document).on('keyup', ".BenterInput", function() {
  var item = $(this).attr('data-item');
  var num = $(this).val();
  var target = $("a[data-target-item='" + item + "']");
  if ($.isNumeric(num)) {
    target.show();
  } else {
    target.hide();
  }
  console.log(item + ' ' + num);
});

内容的提问来源于stack exchange，提问作者user17571799