javascript - 没有 ID 时使用 jQuery 填写表单

Question

我是 jQuery 的新手，并且在反馈页面中有一个小部件，供客户询问姓名、电子邮件和评论/问题部分。我正在尝试通过 URL 传递的值自动填充电子邮件输入。这部分代码是正确的，用var email表示。我试图通过 jQuery 选择输入，但到目前为止还没有成功，因为输入标签大量嵌入在 div 中，所有这些都没有 ID。输入标记也没有 ID，只有类型、名称和所需模式。

这是我迄今为止使用 jQuery 选择输入以及从 URL 获取电子邮件的代码:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var email = getUrlParameter('email');
console.log(email);

// Use jQuery to select the proper input field
var value = $('input[type=email].name').val();
console.log(value);

此代码没有发生错误，但我确实收到了 value 的控制台日志，其中显示 undefined。以下是小部件中标签层次结构的快照(请记住，我无法更改小部件代码):

突出显示的元素是我需要选择并更改其值的元素。

Answer 1

为什么选择器中有 .name ？

分析您的选择器，您正在选择一个 input 类型(正确)、类型 email (正确)和类 name 的元素。错误，因为您输入的类为空。在选择器中，点表示类:https://www.w3schools.com/cssref/css_selectors.asp

你应该删除.name这个东西。

此外，如果列表中有更多电子邮件类型的输入，您应该使用该输入唯一的选择器。查找 parent ID、独特属性等。

您只需在父选择器前面添加即可选择特定父级中的元素。我发现你在某处有一个 id content 的父级，那么你可以这样做:

$("#content input[type='email']")

主题标签意味着通过 id 选择。

让选择器更具选择性(什么？)，您可以通过输入属性进行选择。只需添加您想要的属性即可:

$("#content input[type='email'][name='email']")

如果通过属性此输入已经是唯一的，您可以这样保留它:

$("input[type='email'][name='email']")

不要过度选择，但也不要选择不足。如果您向选择器添加了太多元素，则在更改某些内容时很容易被破坏，但如果添加的元素太少，则在添加内容时很容易被复制。只要保持足够即可。