jQuery - 入力が値と一致しない場合に別のtrを選択する方法

初心者で、私は何かを取り除こうとしていて、つかれてしまいました。私は "fc_cart_foot_tax_tbd"のIDを持つ表の行を選択しようとしていて、誰かが "customer_state_name"のクラスを持つ入力フィールドにイリノイ州以外の州を入力した場合、 "selected"のクラスを追加しようとしています。ここで私のHTMLは動作しません。jQuery - 入力が値と一致しない場合に別のtrを選択する方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Basic</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
    //Show the tax info if the shipping state is not Illinois 
     $("#customer_state_name").each(function() 
     { 
      if (!$(this).html() == 'Illinois') 
      { 
      $("#fc_cart_foot_tax_tbd").addClass("selected"); 
      } 
     }); 
    }); 
    </script> 
    </head> 
    <body> 

    <form action="#"> 
    <input name="state" id="customer_state_name" value="" /> 
    </form> 

    <table> 
    <tr id="fc_cart_foot_tax_tbd"> 
    <td>Content here!</td> 
    </tr> 
    </table> 

    </body> 
    </html>

出典

2010-12-06 flinx777

私はデモを掲示するために、[JSフィドル]（http://jsfiddle.net/）を提案、または[JSビン]（http://jsbin.com/）もいいですか？また、テーブル行を「選択」することで、どういう意味ですか？ –

おはようございます...ありがとうございます。私は明らかにするために投稿を更新しました。私が意図したのは、上記のIDを持つ行にクラスを追加することでした。希望が役立ちます。 – flinx777

いくつかの懸念があります。

IDに.each()関数を使用しています。 IDはドキュメント内で一意でなければなりません。複数のアイテムがある場合はクラスを使用します。
代わり.val()を使用し、<input>フィールドの値を取得するために$(this).html()を使用しています。
ページに入力するときに一度だけ実行したコードは、<input>に.change()の機能を作成する必要があります。そのため、ユーザーが変更するたびに実行されます。
あなたの条件に(!a == b)を使用しています。これはあなたが意図しているものではありません。あなたはnot-equal (a != b)を使用してください。

のjQuery：

$(document).ready(function() { 
    $(".customer_state_name").change(function() { 
    if ($(this).val() != 'Illinois') { 
     $("#fc_cart_foot_tax_tbd").addClass("fc_cart_foot_tax_tbd"); 
    } else { 
     $("#fc_cart_foot_tax_tbd").removeClass("fc_cart_foot_tax_tbd"); 
    } 
    }); 
});

HTML：

<form action="#"> 
    <input name="state" class="customer_state_name" value="" /> 
</form> 

<table> 
    <tr id="fc_cart_foot_tax_tbd"> 
     <td>Content here!</td> 
    </tr> 
</table>

出典

2010-12-06 21:34:56 Orbling

ご回答ありがとうございます。私が上記で取り上げていない1つの質問は、誰かが状態価値を後で変えたいと思ったらどうなるでしょうか？実際に追加したばかりのクラスを削除するにはどうすればよいですか？ – flinx777

@flinx777反対のことをする 'else'節が追加されました。クラスがまだ存在しない場合、 '.removeClass（）'コールは何もしません。 – Orbling

Ok ...それを使って遊んで、あなたのコードで作業するためのすべてを得ました...ありがとう！ – flinx777

if ($(this).val() != 'Illinois') ...

単項否定演算子は、あなたが思うよりも優先順位が高いです。

.each()を$('#...')に送信する理由はありません。特定のid属性を持つ要素の1つだけが同じ文書内で正当なものであるためです。あなたは、単に可能性が代わりにCSSクラスを使用して、またはする必要があり、次のいずれか

if ($('#customer_state_name').val() != 'Illinois') ...

外.each()ラッパーなし。

出典

2010-12-06 21:34:34 Phrogz

私はこれが既に回答されて実現するが、私はあなたが説明するために何かをするべきであることを指摘したかったです正/下/上ケーシング。あなたのユーザーがキャップをロックしているとします。適切なケースがないとします。彼らが間違ってスペースバーにぶつかったとします。私はこのコードがあなたの目的のためにはるかに良く動作すると思います。それは適切なケースを強制し、テキストボックスの値をトリムします。また、「イリノイ州」の条件が満たされていない場合は、クラスが削除されていることを確認する必要があります。 JSFiddleで次のコードを試してみてください。

$(function() { 
    $("#customer_state_name").change(function() { 
     var stateName = $(this).val().split(" "); 
     var stateProper = new Array(); 
     for(x in stateName){   
      stateProper.push(stateName[x].charAt(0).toUpperCase() + stateName[x].substr(1).toLowerCase()); 
     } 
     var stateProper=stateProper.join(" ").trim(); 
     $(this).val(stateProper); 
    if($(this).val() != 'Illinois') { 
     $("#fc_cart_foot_tax_tbd").addClass("selected"); 
    } 
     else{ 
     $("#fc_cart_foot_tax_tbd").removeClass("selected");  
     } 
    }); 
});

出典

2010-12-06 22:54:45 bozdoz

'var x'がなければ、グローバル変数を作成して変更します。 'var stateProper = []'と書くのは短くて速いです。 'stateProper'を何度も繰り返す必要はありません。 – Phrogz

私はあなたのコメントを理解していません。私はグローバル変数を作成して変更していることを理解しています。私は "var stateProper = []"をどこに挿入するのかわからない。 stateProperを再作成する必要はないことを理解していますが、私はそれを解決する習慣に慣れています。 – bozdoz

@bozdox ...これを作成する時間を取ってくれてありがとう、ありがとう。私はこれをもう少し理解して理解する必要があります。 thnx！ – flinx777

jQuery - 入力が値と一致しない場合に別のtrを選択する方法

答えて

関連する問題