使用 jQuery 查找 HTML 表单元素的子类型

Posted

技术标签:

【中文标题】使用 jQuery 查找 HTML 表单元素的子类型【英文标题】:Finding the subtype of an HTML form element using jQuery 【发布时间】:2013-04-20 19:07:43 【问题描述】:

我正在尝试使用 jQuery(版本 1.4+)来确定表单上输入元素的特定类型。我已经了解了如何使用 jQuery 确定元素类型,如这些问题中所述:

Get element type with jQuery finding the type of an element using jQuery How to find element type in JQuery

...使用类似这样的脚本:

var btn_submit = $(calendar_box).find('input[name="submit"]');
var elementType = btn_submit.prop('tagName');

这确实有效。但是,我的问题更具体一些。我有一个 check_form 功能,仅在填写必填字段时才启用提交按钮;如果提交按钮是标准表单按钮,它会删除“禁用”属性,如果按钮是图像,它会换入图像的“启用”版本。问题是对于任何一种类型的按钮,elementType 总是以 INPUT 形式返回。我需要能够区分这两种输入,以便我可以针对启用按钮采取适当的操作。

有没有办法使用 jQuery 来查找元素的 子类型?在我看来,无论我检查的是文本框、按钮还是图像,elementType 都将是 INPUT。

编辑

很抱歉遗漏了 html

对于 HTML 按钮的情况,它看起来像:

<input type="button" id="submit" name="submit" value="COMPUTE CALENDAR" onkeypress="return handle_key_press_box(event);" onclick="submit_form();" disabled="disabled" />

我也用过这样的图片:

<input type="image" id="submit" name="submit" onkeypress="return handle_key_press_box(event);" onclick="submit_form();" disabled="disabled" />

...像这样...

<a href="javascript:submit_form();"><img src="../images/favicon.ico" onkeypress="return handle_key_press_box(event);" /></a>

当我使用链接方法时,我得到 elementType 值的“null”。我想我可以在我的函数逻辑中使用它,但不知何故,它似​​乎不是最佳的。

提前致谢。

编辑

这行得通,伊杰。 attr('type') 仍然为锚标记返回 null,但它确实正确区分了图像和按钮类型。我将此标记为已回答!

【问题讨论】:

您可以访问元素属性,例如btn_submit.attr('type')。如果您也包含 HTML,我可以发布解决方案 这行得通,Ejay。 attr('type') 仍然为锚标记返回 null,但它确实正确区分了图像和按钮类型。我将此标记为已回答! 实际上,Ejay,我认为,您必须将其发布为答案而不是评论,除非您希望我通过自己发布答案来窃取您的信用!再次感谢。 【参考方案1】:

这里是:)

您可以使用$(element).attr('arrtibute_name') 访问元素属性。在您的情况下,您可以通过

区分图像按钮和简单按钮
var btn_submit = $(calendar_box).find('input[name="submit"]');
if(btn_submit.attr('type') == 'image')
    //this is image button

else if(btn_submit.attr('type') == 'button')
    //this is a simple button

//in case you're expecting <a> tags too
else if(btn_submit.prop('tagName') == 'A')
    //this is an anchor tag

你可以阅读更多关于jQuery .attr() here

【讨论】:

以上是关于使用 jQuery 查找 HTML 表单元素的子类型的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 仅在 DOM 中单击时查找下一个表单元素

form的jquery对象调用find方法找不到任何子元素

jQuery 在 .each 中查找之前的元素标签

使用jquery实现的清空表单元素代码实例

带有验证和存储 Jquery 的 Laravel 表单添加 html 元素

JQuery选择器特辑