javascript - 使用单击的 的 data-id 更新隐藏输入的值

Question

我创建了一个表单，其中包含带有子下拉菜单的模拟下拉菜单，这是使用 foreach 循环通过 @Model 创建的。当我单击其中一个 时，我希望隐藏输入字段的值等于单击的数据 ID

到目前为止我所得到的 - HTML

     <form id="myForm" method="post">
                    @Html.HiddenFor(x => x.User);

                    <div class="yourstats" id= "yourstats">
                        <h3>Your Stats</h3>
                    </div>

                    <div class="dropdown">
                        <div class="yourteam">
                            <h3>Teams</h3>
                        </div>
                        <div class="dropdown-content">

                            <div class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">Team 1 <span class="caret"></span></a>
                                <div id='Team1' class="dropdown-menu">
                                    @foreach (var member in Model.Team1Members)
                                    {
                                        <a href="#" data-id="@member.Key">@member.Value</a>

                                    }
                                </div>
                            </div>
                            <div class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">Team2 <span class="caret"></span></a>
                                <div id='Team2' class="dropdown-menu">
                                    @foreach (var member in Model.Team2Members)
                                    {
                                        <a href="#" data-id="@member.Key">@member.Value</a>
                                    }
                                </div>
                            </div>

</form>

这是我试图用来从点击中获取 dataid 并将其放入隐藏输入中的函数。当我出于测试目的对 data-id 进行硬编码时，它工作得很好，就像这样 -

`$(".dropdown a").on("click", () => {
   var $value = 7909
   $('#User').val($value)
   $('#myForm').submit()
});`

但是如果没有硬编码值我就无法让它工作

    `$(".dropdown a").on("click", () => {
    var $value = $(".dropdown a").data("id")
    $('#User').val($value)
  $('#myForm').submit()
});`

Chrome 开发工具告诉我，当我使用硬编码值时，我将正确的 ID = 7909 发送到服务器。但是当我尝试使用我的实际功能时，我没有向服务器发送任何数据。那么这意味着问题出在这部分代码中，对吗？

`$(".dropdown a").data("id")`

我很好地研究了涉及选择数据 ID 和/或更新隐藏输入的值的其他问题，它们迄今为止告知了我的工作，但没有骰子。我确信我做错了一些非常简单的错误，有人能告诉我那是什么吗？

编辑:我也尝试过

`$('.dropdown a').attr('data-id')`

和

`$('.dropdown a').data('data-id')`

运气不佳，并且出现同样的错误。

Answer 1

由于您使用的是箭头函数，因此没有“this”的概念。您的部分问题可能是您需要知道哪个控件是此函数的发送者，以便您可以从发送者元素读取 data-id 属性。从箭头功能转向:

$('.dropdown a').on('click', function(){ 
   var $value = $(this).attr('data-id');
   $('#User').val($value)
   $('#myForm').submit() 
});