Why show hide option does not work? The idea is to be able to use class name with space like where XXX 01 is dynamic data

Here is not working jsfidle: https://jsfiddle.net/master1991/fq32Lhe9/36/

$(document).on('keyup', ".BenterInput", function() {
  var item = $(this).attr('data-item');
  var num = $(this).val();

  if ($.isNumeric(num)) {
    $("a[class='B"   item   "']").show();
  } else {
    $("a[class='B"   item   "']").hide();
  }

  console.log(item   ' '   num);
});

<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-but="B" style="display: none;">XXX</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The idea is to be able to use class name with space like

That's not a class name with a space in it; that's two classes.

Matching against the entire classNames list is fragile, because you're having to include a whole bunch of irrelevant classnames, and if any of them differ or are missing the match will fail. It will also break if the classnames are correct but happen to come in a different order:

div[class="a b c"] {
  background-color: green
}

<div class="a b c">One</div>
<div class="b c a">two</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I would strongly recommend against that approach.

Instead you can just match the two specific classes you're interested in:

 a.BXXX.AB {...}

...or in your case (assuming item contains the string "XXX AB")

 $("a.B" item.replace(/ /g,"."))

CodePudding user response：

Your class is btn btn-default btn-xs add_row BXXX AB so you cannot use

$("a[class='BXXX AB']")

You would have to do

$("a[class='btn btn-default btn-xs add_row B"   item   "']").show();

You can toggle using the isNumeric instead of show/hide

NOTE: If you have data-item="XXX.AB" then it works without the split

$(document).on('keyup', ".BenterInput", function() {
  var item = $(this).attr('data-item');
  var num = $(this).val();
  $(`a.B${item.split(" ").join(".")}`).toggle($.isNumeric(num));
});

<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 AB" class="BenterInput">

<a class="btn btn-default btn-xs add_row BXXX AB" data-but="B" hidden>XXX</a>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>