使用点击 <a> 的数据 ID 更新隐藏输入的值

Question

我创建了一个表单，其中包含带有子下拉菜单的模拟下拉菜单，使用通过 @Model 的 foreach 循环创建。当我点击我的其中一个时，我希望我的隐藏输入字段的值等于被点击的数据 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 并将其放入隐藏输入中的函数。当我出于测试目的对数据 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

这是您的 html 示例

<div class="dropdown">
    <a data-id=1 value="volvo">Volvo</a>
    <a data-id=2 value="saab">Saab</a>
</div>

这是你的 jQuery

$(document).ready(function() {
    $(".dropdown a").click(function() {
        console.log($(this).attr("data-id"));
    });
});

关注$(this).attr("data-id")就是你要找的

Answer 2

由于您使用的是箭头函数，因此没有"this."的概念"this."您的部分问题可能是您需要知道哪个控件是该函数的发送者，以便您可以读取数据- sender 元素的 id 属性。离开箭头函数可能对您有好处：

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

Answer 3

这是一个普通的 JS 方法，它使用箭头函数并利用每个事件处理程序都传递给事件对象的事实，该事件对象具有属性 target，它包含对原始元素的引用事件：

document.querySelector('.dropdown').addEventListener(
  'click',
  e => { if (e.target.dataset.id) dataid.value = e.target.dataset.id }
)

span[data-id] { cursor: pointer; }

<div class="dropdown">
    <span data-id=1 value="volvo">BMW</span>
    <span data-id=2 value="saab">Porsche</span>
</div>
<input type="text" id="dataid" />

请注意，我选择用 span 替换 a 元素。锚点不是此处使用的正确元素。当您没有要设置的 href 时总是很容易被发现。

使用点击 <a> 的数据 ID 更新隐藏输入的值

Updating the value of a hidden input with the data-id of a clicked on <a>

html

javascript

jquery

hidden

input