removeClass 不适用于 $(this）.attr('class'），而是 $(this）.attr('id'）

removeClass does't work with $(this).attr('class') but $(this).attr('id')

本文关键字：attr this id 而是 不适用 removeClass 适用于 class      更新时间：2023-09-26

我有这个问题，因为减小了jQuery代码的大小。基本功能是验证表单，如果为空addClass('highlight')或removeClass('highlight')。如果我使用 $(this).attr('id') 它工作正常，但是当我试图使其整洁并更改为 $(this).attr('class') 时，removeClass('highlight')停止工作。我唯一注意到的是有三个.text class，我无法找出原因。请帮忙。

问题代码：http://jsfiddle.net/designpromote/GRG2J/工作代码（$（this）.attr（'id'））：http://jsfiddle.net/designpromote/GRG2J/4/或/3/（不带开关）

我使用switch{}因为我需要验证不同类型的输入。

代码列表如下：

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function() {
$('#myform :input').blur(function() {
    switch($(this).attr('class')) {
        case  'text': 
            if($(this).val() == "") { console.log($(this),  $(this).val()); $(this).addClass('highlight');}
            else {console.log($(this), $(this).val()); $(this).removeClass('highlight');}
            break;
        default:
            break;
    }http://stackoverflow.com/editing-help
});
 })
 </script>
 <style>
.highlight {
border: 2px solid red;
}
</style>
</head>
<body>
<form id="myform">
<input type='text' name='business' id='business' class='text'><br>
<input type='text' name='address' id='address' class='text'><br>
<input type='text' name='city', id='city' class='text'>
</form>
</body>
</html>

使用数据属性存储字段"类型"

http://jsfiddle.net/GRG2J/8/

<form id="myform">
    <input type='text' name='business' id='business' data-type='text'><br>
    <input type='text' name='address' id='address' data-type='text'><br>
    <input type='text' name='city', id='city' data-type='text'>
    </form>
$(function() {
    $('#myform').on('blur', ':input', function() {
        var $this = $(this),
            val = $this.val();
        switch($this.data('type')) {
            case  'text': 
                $this.toggleClass('highlight', !val);
                break;
            default:
                break;
        }
    })
})

并运行任何用于生产的 js 简化器

$(function(){$("#myform").on("blur",":input",function(){var a=$(this),b=a.val();switch(a.data("type")){case"text":a.toggleClass("highlight",!b);break;default:break}})});

该函数将返回您拥有的所有类，从而返回不是您的选项之一text highlight。您可能希望改用函数hasClass。

http://jsfiddle.net/GRG2J/6/

编辑：我刚刚意识到您提到您有多个类，因此使用switch，这可能会给您当前的实现带来问题，因为除了text类之外还添加了highlight类。这也解释了为什么 ID 会起作用，因为每个元素只能分配一个 ID。

此解决方案可能很详细，但下个月更容易维护。

$(function() {
  var theClass = 'highlight';
  $('#myform .text').blur(function() {
    // set meaningful variables
    var element = $(this)
      , isEmpty = (element.val() == '')
      , isHighlighted = element.hasClass(theClass)
      ;
    // perform action
    if (isEmpty && !isHighlighted) element.addClass(theClass);
    if (!isEmpty && isHighlighted) element.removeClass(theClass);
  });
});
相关文章：