如何使用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 
});