如何使用通配符从jQuery对象中删除css类？

Question

环境是jQuery v3.6.0和Bootstrap 5.1.3。

我有一个或多个电话号码字段。我使用引导程序来显示每个字段前的输入组。该输入组包含国旗图像。该标志图像应该根据用户在另一个字段中选择的国家动态变化。

显示标志的span有两个类:标志类和特定于国家的类。每个特定国家的类对应于我的CSS中给定的旗子sprite规则。每个这样的规则都以"country_“开头，以该国的ISO-3166国家代码结尾(例如，country_us =美国，country_de =德国，country_fr =法国等)。

要做到这一点，我需要能够使用通配符只删除特定于国家的类，这样我的代码就不必跟踪当前的标志规则是什么。

jQuery的removeClass()允许我删除一个或多个特定的类(例如，country_us等)，但是我在文档中没有发现任何东西，说明如何使用任何类型的通配符或regEx作为选择器来瞄准类。

下面是我的一个电话字段的标准HTML：

<div id="phone_group" class="form-group">
    <label for="phone" class="control-label">Phone Number*</label>
    <div class="input-group">
        <span class="input-group-text">
            <span class="flag country_us">&nbsp;</span>
        </span>
        <input id="phone" name="phone" type="tel" class="form-control" required>
    </div>
</div>

下面是一个已知的好的regEx表达式，用于类选择，如果需要一个regEx：

/^country_\S+/g

下面是我的JS函数，用于执行标志交换：

const setFlagIcon = function( countryID ) {
    $( '.flag' ).removeClass( 'what I am asking for goes here?' );
    $( '.flag' ).addClass( 'country_' + countryID );
}

最后，触发它的事件处理程序：

$( '#country' ).change( function() {        // when user changes the country            
    lookupCountry( $( '#country' ).val() ); // AJAX call to get the countryID (a global var)
    setFlagIcon( countryID );               // change the flag image
});

Answer 1

我将尝试跟踪当前标志id，以便在全局选择器更改值时删除它。

例如，请参见下面的代码：

注意到：我模仿了lookupCountry(...)函数，以便为下面的示例提供服务--您应该使用自己的函数

​

$(function() {
  const setFlagIcon = function(oldClass, newClass) {
    $('.flag').removeClass(oldClass);
    $('.flag').addClass(newClass);
    console.log($('.flag').attr('class'));
  }
  var currentId = 'us'; // keep track of current flag class being used.

  $('#phone').on('change', function() {
    var oldId = currentId;
    var newId = lookupCountry($(this).val());
    console.log(`changed to ${newId}`);
    setFlagIcon('country_' + oldId, 'country_' + newId);
    currentId = newId;
  });

  const lookupCountry = function(id) {
    switch (id) {
      case '1':
        return 'us';

      case '2':
        return 'fr';
      case '3':
        return 'ca';

      default:
        return 'us';
    }
  }
});

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

<div id="phone_group" class="form-group">
  <label for="phone" class="control-label">Phone Number*</label>
  <div class="input-group">
    <span class="input-group-text">
            <span class="flag country_us">&nbsp;</span>
    </span>
    <input id="phone" name="phone" type="tel" class="form-control" required>
  </div>
</div>

​

UPDATE在读取OP的注释后，另一个选项可能是删除所有类并重新添加它们(以避免跟踪当前使用的标志)。

见下文备选案文2：

​

$(function() {
  const setFlagIcon = function(newClass) {
    // change element's class names (remove all)
    var element = $('.flag').removeClass(function() {
      return $(this).attr("class");
    });

    // now add all classes to same element
    $(element).addClass('flag ' + newClass);
    console.log($('.flag').attr('class'));
  }


  $('#phone').on('change', function() {
    var newId = lookupCountry($(this).val());
    setFlagIcon('country_' + newId);

  });

  const lookupCountry = function(id) {
    switch (id) {
      case '1':
        return 'us';

      case '2':
        return 'fr';
      case '3':
        return 'ca';

      default:
        return 'us';
    }
  }
});

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

<div id="phone_group" class="form-group">
  <label for="phone" class="control-label">Phone Number*</label>
  <div class="input-group">
    <span class="input-group-text">
            <span class="flag country_us">&nbsp;</span>
    </span>
    <input id="phone" name="phone" type="tel" class="form-control" required>
  </div>
</div>

​