2

フォームから入力値を取得し、オブジェクトのプロパティとして設定しようとしています。フォーム内には、contact1 の詳細用と contact2 用の 2 つの div があります。

この問題を解決するために、javascript オブジェクト「ContactTab()」とそのプロパティを作成し、「 contact1 」と「 contact2 」の 2 つのインスタンスと、名前を設定するメソッド「setName() 」を作成しました。

最後に、関数で指定された div に応じて「contact1」または「contact2」を入力することを目的としたメソッド「populateContactTab("divID")」を作成しました。

エラーは発生していませんが、インスタンス オブジェクトを出力すると名前が空になります。

これを別の方法で行う必要がありますか？

ありがとうございました。

HTML

<form id="jform" action="" method="get">
  <div id="primaryContact" style="float:left;">
        <label for="jname">First name:</label>
        <input type="text" id="jname" class="contactTab jname" name="fname" value=""><br>

   </div>
   <div id="secondaryContact" style="float:right;">
        <label for="jname">First name:</label>
        <input type="text" id="jname" class="contactTab jname" name="fname" value=""><br>            
    </div>
  <input type="submit" value="Submit">
</form>

ジャバスクリプト

function ContactTab() // I specify the object
{
    this.name = "";
    this.lastName = "";
    this.address = "";
    this.age = "";
    this.phone = "";
}
var contact1 = new ContactTab();//Create two instances
var contact2 = new ContactTab();    

function populateContactTab(divID){ //should get values of inputs of specific class and set them to one of the instances.

    event.preventDefault();

    var objectName; 
    if (divID == "primaryContact")
    { 
        objectName = "contact1";
    }
    else (divID == "secondaryContact") 
    {  
        objectName = "contact2";
    }


    $(".contactTab").each( function(index, item){
        switch(item) 
        {
        case $(this).hasClass('jname'):
            objectName.setName($(this).val()); 
        case 'jlastName':
            objectName.setLastName();     
        case 'jage':
            objectName.setAge();      
        case 'jphone':
            objectName.setPhone();
        case 'jaddress':
            objectName.setAddress();
            break;

        }
    });

}

ContactTab.prototype.setName = function(newName)
{
    if (typeof newName != 'undefined')
    {
        this.name = newName;
    }
    else
    {
        document.write("Please enter a valid name");
    }
};
4

1 に答える 1

1

いくつかの問題があります。

まず、名前ではなくオブジェクトを割り当てる必要があります。

if (divID == "primaryContact")
    { 
        objectName = contact1;
    }
else if (divID == "secondaryContact") 
    {  
        objectName = contact2;
    }

ifafterもありませんでしたelse。

.each()次に、ループを処理するために与えられた DIV だけに制限する必要があります。

$("#"+divID).find(".contactTab").each(...);

第三に、あなたはそのままでは使えませんswitch。それは一連のifs でなければなりません:

if ($(this).hasClass("jname")) {
    objectName.setName($(this).val());
} else if ($(this).hasClass("jlastName")) {
    objectName.setLastName($(this).val());
} else if ($(this).hasClass("jage")) {
    objectName.setAge($(this).val());
} ...

switch値を一連のリテラルと比較するだけですがitem、あなたの場合はクラス名ではなくjQuery要素です。

最後に、コメントに記載されているように、idすべての要素の属性を一意にする必要があるため、同じように再利用することはできませんid="jname"。

于 2013-09-18T10:51:01.760 に答える