如何使用字符串作为类名并在函数中调用它

Question

 <script type="text/javascript">
     $(document).ready(function () {
         $('table tr td a').click(function (event) {
             alert(event.target.id);
             var ClassName = event.target.id;
             var Pref = '.'
             var ClassFull = Pref + ClassName;
             var TdText = $(ClassFull).text();
             alert(TdText);
         });
     });
 </script>

加价：

    <p>
        Account No:
        <input id="AcctNo" type="text"/>
        <input type="submit" id="submit" name="Submit" value="Submit" />
    </p>
    <table>
        @foreach (var item in Model)
        {
           <tr>
              <td>
                 <a id ="@Html.DisplayFor(modelItem => item.EmployerName)" 
                    href ="#">@Html.DisplayFor(modelItem => item.EmployerName)</a>
              </td>
              <td class = "@Html.DisplayFor(modelItem => item.EmployerName)" >
                 @Html.DisplayFor(modelItem => item.AcctNo)
              </td>
           </tr>
        }
    </table>

我获取了发件人的 ID 并有一个类名与发件人 ID 相同的 td，然后获取其中的文本。 return 似乎没有我想要的文字

Answer 1

我假设的问题是，employerName 可以包含空格和特殊字符，这会改变选择器的含义。

在这种情况下，您需要被单击元素的 parent 的下一个兄弟元素的文本，因此

$(document).ready(function () {
    $('table tr td a').click(function (event) {
        var TdText = $(this).parent().next().text();
        alert(TdText);
    });
});

或者您可以使用预定义的 class 名称，例如

<table>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <a class="employer-name" id ="@Html.DisplayFor(modelItem => item.EmployerName)" href ="#">@Html.DisplayFor(modelItem => item.EmployerName)</a>
            </td>
            <td class = "acctNo" >
                @Html.DisplayFor(modelItem => item.AcctNo)
            </td>
        </tr>
    }
</table>

然后找到 parent 的 (td) 与 class acctNo 喜欢

的兄弟姐妹

$(document).ready(function () {
    $('table a.employer-name').click(function (event) {
        var TdText = $(this).parent().siblings('.acctNo').text();
        alert(TdText);
    });
});

Answer 2

我同意这个问题可能是由于 EmployerName 中的空格引起的，但这里有其他几种获取数据的方法。

请注意，我将点击事件处理程序移到了 tr 标记中。您可以使用 html5 数据属性来存储任何 html 标签上的任何信息。或者您可以像以前一样访问文本。

<p>
    Account No:
    <input id="AcctNo" type="text"/>
    <input type="submit" id="submit" name="Submit" value="Submit" />
</p>
<table>
    @foreach (var item in Model)
    {
       <tr>
          <td class="EmployerName" 
                data-name="@Html.DisplayFor(modelItem => item.EmployerName)" 
                data-acctno="@Html.DisplayFor(modelItem => item.AcctNo)">
                    @Html.DisplayFor(modelItem => item.EmployerName)
          </td>
          <td class="AcctNo" >
             @Html.DisplayFor(modelItem => item.AcctNo)
          </td>
       </tr>
    }
</table>

 <script type="text/javascript">
     $(document).ready(function () {
         $('tr').click(function (event) {
             var TdText = $(this).find('.EmployerName').text();
             var Td2Text = $(this).find('.AcctNo').text();
             var Td3Text = $(this).find('.EmployerName').data('acctno');
             alert(TdText);
         });
     });
 </script>

如何使用字符串作为类名并在函数中调用它

How to use string as classname and call it in a function

javascript

asp.net-mvc

web