Question

I have created a form which contains simulated dropdown menu with subdropdowns, created using a foreach loop through a @Model. When I click on one of my , I want value of my hidden input field to equal the data-id of the clicked on

What I had got so far - 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>

This is the function I am trying to use to grab the dataid from the clicked on and put it in the hidden input . It works fine when I hardcode the data-id for testing purposes, like so -

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

but I cant make it work without the hardcoded value

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

Chrome dev tools is telling me that when I use the hardcoded values, I am sending the correct ID = 7909 to the server. But when I try to use my actual function, I am not sending any data to the server. So that means the problem is in this part of the code, right?

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

I had a very good look at other questions that involved selecting a data-id and or updating the value of a hidden input, and they informed my work so far but no dice. I'm sure I'm doing something very simple wrong, can anyone tell me what it is?

EDIT: I have also tried

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

and

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

with no luck, and same error.

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”的概念。问题的一部分可能是您需要知道哪个控件是此函数的发送者，以便可以从sender元素读取data-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" />

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

使用第270行和283行上的<a>

3 个答案: