與jQuery Mobile的條件形式

Question

我有這樣的多用途腳本：

<script> 
$(document).bind("pageinit", function(event, data) { 
    $("#ppreg").hide(); 
    $("#smsreg").hide(); 
    $("#UserName").hide(); 
    $(".group1").hide(); 
    $(".group2").hide(); 
    $(".group0").hide(); 

$('#selectcode').change(function() { 
     var regtype = $("#selectcode option:selected").val(); 
     if (regtype == "@") { 
      $("#ppreg").show(); 
      $("#smsreg").hide(); 
      $("#UserName").show(); 
      $(".group1").show(); 
      $(".group2").hide(); 
      $(".group0").show();   
     } else { 
      $("#ppreg").hide(); 
      $("#smsreg").show(); 
      $("#UserName").show(); 
     $(".group2").show(); 
      $(".group1").hide(); 
      $(".group0").show(); 
     } 
}); 
}); 
    </script> 

範圍1：展示基於所選值 範圍2兩種不同標籤：顯示所有其他的Fileds的COUNTRYCODE選擇

在此之後形成它運行良好：

<label for="selectcode" class="select">LABEL"; 
<select name="countrycode" id="selectcode" data-native-menu=\"true"> 
<option value="@">email (email field)</option> 
    <option value="+39" >SMS:(+39)</option> 
    </select> 
<fieldset data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false">" 
    <legend>"._LOGIN."</legend>" 

<div class="group0>" 

<label for="UserName" id="smsreg" >Username1</label> 
    <label for="UserName" id="ppreg" >Username 2</label> 
    ---- A 
    <input title="TITLE" type="text" name="UserName" value="" class="required" id="UserName" data-clear-btn="true" />" 
    ----- //A 
    <div class="group0"> 
    <label class="group0" for="Password">Password:</label> 
    <input class="group0" type="password" name="Password" value="" id="Password" data-clear-btn="true" placeholder="Password" /> 
.. MORE FIELDS .. 
<button id="login" type="submit" value="validate!" data-theme="b">LOGIN</button> 
    </div> 

但如果我爲了得到用戶名兩種不同的輸入類型字段（電話或電子郵件）時，改變上述HTML（A）佈局看起來很好，但形式sents用戶名空值，當我選擇第一個選項（電話）：

 ----- A1 
    <div class="group2"> 
    <input title="TITLE1" type="tel" name="UserName" value="" class="required group2" id="UserName" data-clear-btn="true" />" 
    </div> 
    <div class="group1"> 
    <input title="TITLE2" type="email" name="UserName" value="" class="required group1" id="UserName" data-clear-btn="true" /> 
    </div> 
    ------- // A1 

原因很清楚，問題是：任何人都可以建議我如何避免這個問題？

Answer 1

在同一頁面中不能有相同的ID。 對於這兩種類型，使用具有不同ID的相同類。

例如

<div class="group2"> 
    <input title="TITLE1" type="tel" name="UserName" value="" class="username required group2" id="UserNameTel" data-clear-btn="true" />" 
    </div> 
    <div class="group1"> 
    <input title="TITLE2" type="email" name="UserName" value="" class="username required group1" id="UserNameMail" data-clear-btn="true" /> 
    </div> 

，並選擇在jQuery腳本不同的選擇。