Question

我有这个问题，因为我减少了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>

Answer 1

使用数据属性存储字段'type'

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 minifier进行生产

$(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}})});

Answer 2

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

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

编辑：我刚刚意识到你提到你有多个类，因此使用switch，这可能会对你当前的实现造成问题，因为你的highlight类是另外添加的到text班。这也解释了为什么ID可以工作，因为你只能为每个元素分配一个ID。

Answer 3

这个解决方案可能很冗长，但下个月更容易维护。

$(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);
  });
});

removeClass不适用于$（this）.attr（'class'）但$（this）.attr（'id'）

3 个答案: