在某个div下获取给定类的元素并获取每个值

时间:2013-09-18 10:28:26

标签: javascript jquery class

我正在尝试从表单中获取输入值并将其设置为对象属性。 在表单内部有两个div,一个用于contact1详细信息,另一个用于contact2。

为了解决这个问题,我创建了一个javascript对象“ ContactTab()”及其属性,然后我创建了两个实例“ contact1 ”和“ contact2 “以及方法” setName()“来设置名称。

最后我编写了方法“populateContactTab(”divID“)”,其目的是根据函数中指定的div填充“contact1”或“contact2”。

我没有收到任何错误,但是当我输出一个实例对象时,名称为空。

我应该这样做吗?

谢谢。

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>

JAVASCRIPT

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");
    }
};

1 个答案:

答案 0 :(得分:1)

有几个问题。

首先,您应该分配对象,而不是它们的名称:

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

if之后你还错过了else

其次,您需要将.each()循环限制为您处理的DIV:

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

第三,你不能按照你的方式使用switch,它应该是一系列if s:

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"