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

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

本文关键字：函数 调用 字符串 何使用      更新时间：2023-09-26
 <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，然后获取其中的文本。 似乎没有返回我想得到的文本

我同意问题可能是因为雇主名称中的空格，但这里有几种其他方法可以获取数据。

请注意，我将单击事件处理程序移动到 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>
我认为的

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

在这种情况下，您需要单击元素的父级的下一个兄弟姐妹的文本，因此

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

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

<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>

然后找到父级（td）的兄弟姐妹，类acctNo类似

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