0

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

3 回答 3

1

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

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}})});
于 2013-01-24T22:08:39.750 回答
0

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

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

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

于 2013-01-24T21:55:54.780 回答
0

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

$(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);
  });
});
于 2013-01-24T22:09:45.723 回答