如何使用jQuery ID選擇具有可變

Question

所以我在我的腳本一節，如下所示：

$('input[id="TestMyId"]').autocomplete({ 
    source: availableChoice 
}, 
}); 

這個偉大的工程，我讓我的自動完成射擊，我可以從列表中選擇選擇，但是當我做測試一個字符串變量，並嘗試與身份識別碼來連接它，我不能讓它在所有火：

@{ 
    var foo = "Test"; 
} 
<body..../> 
<script> 
    $('input[id="' + @foo + 'MyId"]').autocomplete({ 
     source: availableChoice 
    }, 
    }); 
</script> 

FOO聲明爲在.cshtml一個全局變量。不知道當我連接名稱時爲什麼Id選擇不起作用？任何幫助將不勝感激。

好，我下面貼更詳細一點，Id爲FirstNameId在本次測試的情況下，試圖將它與@prefix變量結合：

@using System.Collections.Concurrent 
    @model MyModel 

    @{ 
     var prefixt = "TestContactInformation"; 
    } 

    @using (Html.BeginForm("MyAction", "MyController")) 
    { 

    <article class="widget widgetFullPage" data-role="collapsible" data-collapsed="true" id="articlePrimaryContact" style="height:auto"> 
     <h2>Test Information</h2> 

     <table id="tableContactInformation"> 
      <tr> 
       <td style="width: 180px; padding-top: 20px; padding-left: 15px;"><label>Relationship to Policyholder</label></td> 
       <td style="width: 50px; padding-top: 15px">@Html.DropDownListFor(x => x.PrimaryContact.ContactRole, (List<SelectListItem>)ViewBag.RelToPolicyList, new { id = @prefixt + "RoleId", style = "width:130px", tabindex = @tabIndexBase + 1 })</td> 
       <td style="width: 100px; padding-top: 20px; padding-left: 15px;" id=" titlelable"><label>Title</label></td> 
       <td style="width: 200px; padding-top: 20px;padding-left: 12px;" id="TitleText">@Html.TextBoxFor(x => x.PrimaryContact.Title, null, new { id = @prefixt + "TitleId", style = "width:250px", tabindex = @tabIndexBase + 8 })</td> 
      </tr> 
      <tr id=@prefixt> 
       <td style="width: 150px; padding-left: 15px;"><label>Contact Description</label></td> 
       <td style="width: 100px"> 
        @Html.TextBoxFor(x => x.PrimaryContact.ContactRoleDescription, null, new { id = @prefixt + "DescriptionId", style = "width:250px", tabindex = @tabIndexBase + 2 }) 
       </td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td style="width: 100px; padding-left: 15px;"> 
        <label>First Name</label> 
        @if (@prefixt == "TestContactInformation") 
        { 
         <a id="LearnMore"><img src="~/Images/info.png" alt="" /></a> 
        } 
       </td> 
       @*<td style="width: 100px;">@Html.TextBoxFor(x => x.PrimaryContact.FirstName, null, new { id = @prefixt + "FirstNameId", style = "width:250px", tabindex = @tabIndexBase + 3 })</td>*@ 
       <td style="width: 100px;">@Html.TextBoxFor(x => x.PrimaryContact.FirstName, null, new { id = @prefixt + "FirstNameId", style = "width:250px", tabindex = @tabIndexBase + 3 })</td> 
       <td style="width: 100px;padding-left: 15px;"><label>Address Line 1</label></td> 
       <td style="width: 200px;padding-left: 12px;">@Html.TextBoxFor(x => x.PrimaryContact.AddressLine1, null, new { id = @prefixt + "Address1Id", style = "width:250px", tabindex = @tabIndexBase + 9 })</td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td style="width: 100px; padding-left: 15px;"><label>Last Name</label></td> 
       <td style="width: 100px; ">@Html.TextBoxFor(x => x.PrimaryContact.LastName, null, new { id = @prefixt + "LastNameId", style = "width:250px", tabindex = @tabIndexBase + 4 })</td> 
       <td style="width: 100px; padding-left: 15px;"><label>Address Line 2</label></td> 
       <td style="width: 200px; padding-left: 12px;">@Html.TextBoxFor(x => x.PrimaryContact.AddressLine2, null, new { id = @prefixt + "Address2Id", style = "width:250px", tabindex = @tabIndexBase + 10 })</td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td style="width: 100px; padding-left: 15px;"><label>Email</label></td> 
       <td style="width: 100px; ">@Html.TextBoxFor(x => x.PrimaryContact.Email, null, new { id = @prefixt + "EmailId", style = "width:250px", tabindex = @tabIndexBase + 5 })</td> 
       <td style="width: 100px; padding-left: 15px;"><label>City</label></td> 
       <td style="width: 200px; padding-left: 12px;">@Html.TextBoxFor(x => x.PrimaryContact.City, null, new { id = @prefixt + "CityId", style = "width:250px", tabindex = @tabIndexBase + 11 })</td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td style="width: 100px; padding-left: 15px;"><label>Phone</label></td> 
       <td style="width: 100px; ">@Html.TextBoxFor(x => x.PrimaryContact.Phone, null, new { id = @prefixt + "PhoneId", @class = "phone", style = "width:250px", tabindex = @tabIndexBase + 6 })</td> 
       <td style="width: 100px; padding-left: 15px;"><label>State</label></td> 
       <td style="width: 200px; padding-left: 12px;">@Html.DropDownListFor(x => x.PrimaryContact.State, Model.PrimaryContact.StatesList ?? (List<SelectListItem>)ViewBag.StatesList, new { id = @prefixt + "StateId", style = "width:130px", tabindex = @tabIndexBase + 12 })</td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td style="width: 100px; padding-left: 15px; padding-bottom: 20px"><label>Ext.</label></td> 
       <td style="width: 100px;padding-bottom: 20px">@Html.TextBoxFor(x => x.PrimaryContact.Ext, null, new { id = @prefixt + "ExtId", style = "width:250px", @class = "numbersOnly", tabindex = @tabIndexBase + 7 })</td> 
       <td style="width: 100px; padding-left: 15px;padding-bottom: 20px"><label>Zip</label></td> 
       <td style="width: 200px;padding-left: 12px;padding-bottom: 20px">@Html.TextBoxFor(x => x.PrimaryContact.Zip, null, new { id = @prefixt + "ZipId", @class = "zip", style = "width:250px", tabindex = @tabIndexBase + 13 })</td> 
      </tr> 
     </table> 
    </article> 

    } 

    <link rel="stylesheet" href="~/Content/jquery-ui.css" /> 
    <style> 
     .ui-corner-all, 
     .ui-corner-top, 
     .ui-corner-left, 
     .ui-corner-tl { 
      border-top-left-radius: 0; 
     } 

     .ui-corner-all, 
     .ui-corner-top, 
     .ui-corner-right, 
     .ui-corner-tr { 
      border-top-right-radius: 0; 
     } 

     .ui-corner-all, 
     .ui-corner-bottom, 
     .ui-corner-left, 
     .ui-corner-bl { 
      border-bottom-left-radius: 0; 
     } 

     .ui-corner-all, 
     .ui-corner-bottom, 
     .ui-corner-right, 
     .ui-corner-br { 
      border-bottom-right-radius: 0; 
     } 
    </style> 

    <script type="text/javascript"> 
     var availableContacts = []; 

     @foreach (var theContact in Model.ContactsList) 
     { 
      @:availableContacts.push({value: "@theContact.FirstName, @theContact.LastName, @theContact.City, @theContact.State", label: "@theContact.FirstName, @theContact.LastName" }); 
     } 

     //$("input[id='TestContactInformationFirstNameId']").autocomplete({ 
     // source: availableContacts, 
     // select: function (event, ui) { 
     //  var firstName = ui.item.value.split(',')[0]; 
     //  var lastName = ui.item.value.split(',')[1]; 
     //  var city = ui.item.value.split(',')[2]; 
     //  var state = ui.item.value.split(',')[3]; 
     //  alert(firstName); 
     //  alert(lastName); 
     //  alert(city); 
     //  alert(state); 
     // }, 
     //}); 

     var theConcated = @string.Format("{0}FirstNameId", @prefixt); 
     $("input[id='" + theConcated + "']").autocomplete({ 
      source: availableContacts, 
      select: function (event, ui) { 
       var firstName = ui.item.value.split(',')[0]; 
       var lastName = ui.item.value.split(',')[1]; 
       var city = ui.item.value.split(',')[2]; 
       var state = ui.item.value.split(',')[3]; 
       alert(firstName); 
       alert(lastName); 
       alert(city); 
       alert(state); 
      }, 
     }); 

    </script> 
    <script type="text/javascript" src="~/Scripts/jquery.maskedinput.js"></script> 

註釋掉部分與

$("input id='TestContactInformationFirstNameId']") 

的偉大工程，但運行的其他部分與合併字符串我得到的是這樣的：

0x800a1391 - JavaScript runtime error: 'TestContactInformationFirstNameId' is undefined 

任何想法？

Answer 1

OK，經過多次試驗和錯誤中發現以下是工作我的情況，在這裏張貼櫃面它有助於別人：

$("input[id='@prefixt" + "FirstNameId']") 

或者

$("#@prefixt" + "FirstNameId") 

兩個似乎工作，看起來像變量調用需要在引號內。

Answer 2

這個選擇器在jQuery中不能執行。您應該首先使用ID選擇器，然後使用過濾器函數應用輸入約束（如果甚至必要，因爲ID意味着唯一）。

$('#' + @string.Format("'{0}'", foo) + 'MyId').filter('input'); 

如果您正在做的好事，意思是保持ID屬性每頁獨一無二，那麼下面應該工作。

$('#' + @string.Format("'{0}'", foo) + 'MyId').autocomplete({ 
    source: availableChoice 
});