JQuery关键字“;这个“;未获取属性值

JQuery keyword "this" does not get attribute value

本文关键字：属性 获取 这个 关键字 JQuery      更新时间：2023-09-26

我在玩JQuery关键字this。

我遇到了一些我不理解的事情。这是我的代码：

<body>  
    <a id="link_1">jQuery.com</a>
    <!-- adding JQUERY -->  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>            
    <!-- my JavaScript -->      
    <script>
      $("a").attr("href", "target_1");  
      $("a").attr("new_attribute", "new_attribute_value");
      $(function ($) {          
        $("a").mouseenter(function(){
                alert(this.id);
                alert(this.href);
                alert(this.new_attribute);          
         });        
       });  
    </script> 
</body>

我希望JQuery将id、href和我的new_attribute作为警报消息返回。

我可以调用关键字"this"上的id（使用this.id），它可以按预期工作。我也可以在关键字this上调用href（使用this.href），它可以按预期工作（即使我只使用JQuery设置href的值（非内联））。

然而，对于新属性"new_attribute"，这种集合&get没有按预期工作。

我的问题：我做错了什么？是否只能对关键字"this"调用"certific/limited"属性

这是因为new_attribute不是一个有效的属性。

一些内置属性被映射到属性，当你进行时

this.id

您实际上得到的是id属性，而不是属性，因为这将是

this.getAttribute('id')

你可以做

this.getAttribute('new_attribute')

但是您确实应该使用data-*属性，而不是自己的属性，但是jQuery的data()在内部映射数据，不添加属性，但在您的情况下，这可能是您想要的，只需在元素上存储任意数据

$("a").attr("href", "target_1");  
$("a").data("new_attribute", "new_attribute_value");
$(function ($) {          
    $("a").mouseenter(function(){
            alert(this.id);
            alert(this.href);
            alert( $(this).data('new_attribute') );
    });        
});

在这种情况下，this指向HTMLAnchorElement对象，这里的问题是HTMLElement属性及其属性之间的差异。简单地说，属性是作为HTML的一部分呈现的，并用于HTML标记端的附加对象声明性配置。

另一方面，对象的某些属性并不总是具有相应的属性。有时他们会这样做，但在大多数情况下，他们不会。

您可以像使用new_attribute一样将任意属性设置为HTMLElement，但此自定义属性值不会成为对象属性。因此，读取这样的自定义属性作为属性将生成undefined。

"this"指的是DOM元素（try-console.log（this））。元素公开其id属性，如您所见：https://developer.mozilla.org/en-US/docs/Web/API/element

由于它是一个A元素，它还公开了它的href属性。但它永远不知道你的自定义属性。所以它不能暴露它。

在你的事件处理程序中试试这个：

var $this = $(this);
alert($this.attr('new_attribute'));

您需要将this视为选择器，因此将其编写为$(this)

您的问题是使用attr()方法设置了一个属性，但通过调用jQuery的prop()的等效方法来查询（获取）它。

由于这是一个非标准属性，锚<a>元素HTMLAnchorElement的主接口或它在DOM中继承的其他接口没有/实现new_attribute属性，因此this.new_attribute将始终返回undefined。

然而，如果你想继续尝试this关键字，你可以试试this.attributes['new_attribute']，这样你的编码之旅就不会有任何令人不快的惊喜了：）

相关文章：