使用jQuery和自定义属性从锚点向隐藏表单输入传递值

Question

我有一个单页网站，它有几个锚标记，可以显示带有表单的模式窗口。每个链接都应该使用自定义属性(比如item name="item 1"(向表单传递一个值。

表单应该从调用它的链接中获取项目名称属性，并填写隐藏字段。

表单隐藏在页面的div中，然后显示为模式窗口。

我该怎么办？我使用jQuery，因为这是一个非常基本的页面。

Answer 1

您希望为此使用数据属性，并在单击时调用一个函数，该函数a(设置隐藏字段的值，b提升模态。以下内容将数据属性传递到单击时的函数，然后更新隐藏字段值。

此外，你不需要jQuery，直接的js就足够了。

您还可以添加自己的逻辑来引发模态。

const links = document.querySelectorAll('.trigger-modal-link');
links.forEach(function(link){
link.addEventListener("click", (e) => triggerModal(e.target))
})
function triggerModal(el) {
const id = el.getAttribute('data-id');
const field = document.querySelector('#hidden-field');
field.value = id;

// logic to raise the modal

// console the input - just to show the hidden field is updating its value on the click

console.log(field); // shows eg: <input type="hidden" id="hiddenfield" value="1"></input>
}

a { color: blue;}
a + a { margin-left: 32px}

<a data-id="1" class="trigger-modal-link">option 1</a>
<a data-id="2" class="trigger-modal-link">option 2</a>
<input type="hidden" id="hidden-field"/>

如果你确实想使用jQuery，它可能看起来像这个

$(document).ready(function(){
$('.trigger-modal-link').click(function() {
const id = $(this).attr('data-id');
const field = $('#hidden-field');
field.val(id);
console.log(field[0]);
})
}); // gives eg : <input type="hidden" id="hidden-field" value="1"></input>

a { color: blue;}
a + a { margin-left: 32px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-id="1" class="trigger-modal-link">option 1</a>
<a data-id="2" class="trigger-modal-link">option 2</a>
<input type="hidden" id="hidden-field"/>