0

jQueryコードのサイズを縮小するときにこの問題が発生します。基本的な機能は、空addClass('highlight')またはの場合にフォームを検証することremoveClass('highlight')です。を使えば問題なく動くのですが、$(this).attr('id')きちんと作ろうとして に変えたら動かなくなってしまいました。私が気づいたのは、 が 3 つあるということだけです。理由はわかりません。助けてください。$(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>
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ミニファイアーを実行します

$(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、オプションの 1 つではないものを返します。hasClass代わりに関数を使用することもできます。

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

編集: 複数のクラスがあり、したがって を使用しているとのことですが、クラスに加えてクラスが追加さswitchれるため、現在の実装に問題が生じる可能性があります。これは、要素ごとに 1 つの ID しか割り当てることができないため、ID が機能する理由も説明しています。highlighttext

于 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 に答える