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

Question

我有一个单页网站，它有几个显示模态 window 和表单的锚标记。每个 link 都应该使用自定义属性（例如 item-name="item 1"）向表单传递一个值。

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

表单隐藏在页面的 div 中，然后显示为模态 window。

我该怎么做？我正在使用 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"/>

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

Passing a value to a hidden form input from an anchor using jQuery and custom attributes

forms

jquery

custom-attributes