如何使用 jQuery 获取/设置输入字段的值？ [复制]

Posted 2023-02-22

【中文标题】如何使用 jQuery 获取/设置输入字段的值？ [复制]

【英文标题】：How to get/set values to input fields using jQuery? [duplicate]

【发布时间】：2020-02-15 05:10:45

【问题描述】：

我知道使用 jQuery 获取/设置输入字段的值，如下例所示。

//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);

我想使用数据属性获取/设置值。例如，如果我有以下输入，我想使用“data-wpt-id”设置/获取值。

<input type="text" data-wpt-id="wpcf-latitude">

注意：请注意此输入字段没有id属性。

【问题讨论】：

使用 attr w3schools.com/jquery/html_attr.asp

我认为您需要更好地解释。您在编写选择器时需要帮助吗？

如果你不能直接选择元素，那么你需要从周围的HTML结构中检索它，例如$('#container .left-column.foo input').data('wpt-id')

【参考方案1】：

你需要使用Attribute Selector

//Get
var bla = $('input[data-wpt-id="wpcf-latitude"]').val();

//Set
$('input[data-wpt-id="wpcf-latitude"]').val(bla);

【参考方案2】：

// Get 
var bla = $('input[data-wpt-id="wpcf-latitude"]').val()

// Set
$('input[data-wpt-id="wpcf-latitude"]').val(bla)

【讨论】：

你能解释一下吗

【参考方案3】：

你可以这样做：

$('input[data-wpt-id]').val(function() 
  return $(this).data("wpt-id")
);

演示

$('input[data-wpt-id]').val(function() 
  return $(this).data("wpt-id")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-wpt-id="wpcf-latitude">

【参考方案4】：

遵循 data 函数的 jQuery 文档：https://api.jquery.com/data/

遵循 dataset 属性的 Vanilla 文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

例子：

<input type="text" class="container" data-wpt-id="5">

// jQuery
const $inputElement = $('.container');

const wptId = $inputElement.data('wptId');

console.log(wptId); // 5

$inputElement.data('wptId', 10);

console.log($inputElement.data('wptId')); // 10

// Vanilla
const inputElement = document.querySelector('.container');

const wptId= inputElement.dataset.wptId|| 0;

console.log(wptId); // 5

inputElement.dataset.wptId= 10;

console.log(inputElement.dataset.wptId); // 10


// If the `<input>` element has no Id/Class, you can use following selector instead:

const $jquery = $('input[data-wpt-id]');
const vanilla = document.querySelector('input[data-wpt-id]');