Обновление значения скрытого ввода с идентификатором данных нажатой <a> - PullRequest
Новая
       24

Обновление значения скрытого ввода с идентификатором данных нажатой <a>

0 голосов
/ 28 января 2019

Я создал форму, которая содержит эмулированное выпадающее меню с вложенными выпадающими окнами, созданными с помощью цикла foreach через @Model.Когда я нажимаю на одно из моих, я хочу, чтобы значение моего скрытого поля ввода равнялось идентификатору данных нажатой кнопки

То, что я получил до сих пор - 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это функция, которую я пытаюсь использовать, чтобы получить dataid от нажатой кнопки и поместить его в скрытый ввод.Он отлично работает, когда я жестко кодирую идентификатор данных в целях тестирования, например: 

`$(".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 dev tools говоритмне, что когда я использую жестко закодированные значения, я посылаю правильный ID = 7909 на сервер.Но когда я пытаюсь использовать свою реальную функцию, я не посылаю никаких данных на сервер.Так что это означает, что проблема в этой части кода, верно? 

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

Я очень хорошо посмотрел на другие вопросы, которые касались выбора идентификатора данных или обновления значения скрытого ввода,и они сообщили мою работу до сих пор, но не играли в кости.Я уверен, что я делаю что-то очень простое неправильно, кто-нибудь может сказать мне, что это такое?

РЕДАКТИРОВАТЬ: Я также пытался 

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

и 

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

без везения и с той же ошибкой.

Ответы [ 3 ]

0 голосов
/ 28 января 2019

Поскольку вы используете функцию со стрелкой, понятия «это» не существует.Частично ваша проблема может заключаться в том, что вам нужно знать, какой элемент управления является отправителем этой функции, чтобы вы могли прочитать атрибут data-id из элемента sender.Вам может быть полезно перейти от функции стрелки к: 

$('.dropdown a').on('click', function(){ 
   var $value = $(this).attr('data-id');
   $('#User').val($value)
   $('#myForm').submit() 
});
0 голосов
/ 28 января 2019

Вот ванильный подход 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 для установки.

0 голосов
/ 28 января 2019

Вот ваш пример 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") isчто вы ищете

...