每次用户单击链接时使用javascript获取属性的值

Question

我有一个导航菜单，但我打算获取属于用户每次在javascript中单击的每个链接的“标题”。 我使用jquery尝试了以下功能，但在似乎失败的地方看不到它。 任何帮助都非常感谢。

  jquery(function() { var title = jquery(title).attr('title'); console.log("you have selected" + "" title); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a title = "google 1" href="https://www.google.com">Visit google</a> <a title = "Yahoo" href="https://www.yahoo.com">Visit This link</a> <a title = "Verizon Wireless" href="https://www.Verizon.com">Visit Verizon</a> <a title = "Social Media" href="https://www.facebook.com">Visit facebook/a> 

结果：

  you have selected Social Media

Answer 1

首先，您的代码中有两个错字：

console.log("you have selected" + "" title);

在""和title之间缺少+ ，这就是在运行代码时导致错误的原因。

其次，在最后一个超链接的结尾a之前缺少< 。

即使修复了这些问题，主要的问题是您的函数设置为在加载HTML后立即运行。 您需要为单击链接设置事件处理程序。

您也没有正确选择a元素的title属性。

请记住，尽管单击链接会使用户离开当前页面，所以尝试将消息发送到控制台只会在这些消息消失并加载新页面之前显示一会儿。 当然，出于测试目的，您可以取消导航（就像我在下面的代码中所做的那样），这样您就不会真正离开并能够看到消息。

顺便说一句，键入jquery的快捷方式是$ 。

 // When all the HTML elements have been parsed into memory... $(function() { // Get all the <a> elements that have a title attribute into a JQuery collection var $links = $("a[title]"); // Give each member of the collection a click event handler $links.on("click", function(event){ // Since clicking a link will navigate you away from this page, // we can stop that navigation (for testing purposes only) by // telling the event that is passed automatically to the function // to not continue event.preventDefault(); // Then, we can access the specific element that triggered the event // via the "this" keyword and get its attribute value: console.log("you have selected " + $(this).attr('title')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a title = "google" href="https://www.google.com">Visit google</a> <a title = "Yahoo" href="https://www.yahoo.com">Visit This link</a> <a title = "Verizon Wireless" href="https://www.Verizon.com">Visit Verizon</a> <a title = "Social Media" href="https://www.facebook.com">Visit facebook</a> 

Answer 2

根据问题的标题：（ 每次用户单击链接时， 使用javascript获取属性的值）

您的方法存在一些问题，让我们对其进行分析

jquery(function() {
    var title = jquery(title).attr('title');    
    console.log("you have selected" + "" title);
});

缺少+运算符以连接两个字符串。

console.log("you have selected" + "" title);
                                    ^

您使用了错误的jquery函数，请改用jQuery （JavaScript区分大小写）。

jquery(function() {
^   var title = jquery(title).attr('title');    
                ^
    console.log("you have selected" + "" title);
});

最后a元素包含错误的标签。

<a title = "Social Media" href="https://www.facebook.com">Visit facebook/a>
                                                                        ^

查看此代码段（仅Javascript）

此方法适用于不允许使用其他第三方框架（例如jQuery的情况

 // This is the IIFE (Immediately Invoked Function Expression) to bind the clik event to your links function bindClickEvent() { document.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function(e) { e.preventDefault(); // This is to disable the default behavior of your links. var title = a.getAttribute('title'); console.log("you have selected: " + title); }); }); } // Add this at the end of your body tag. (function() { bindClickEvent(); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a title="google 1" href="https://www.google.com">Visit google</a> <a title="Yahoo" href="https://www.yahoo.com">Visit This link</a> <a title="Verizon Wireless" href="https://www.Verizon.com">Visit Verizon</a> <a title="Social Media" href="https://www.facebook.com">Visit facebook</a> 

看到？ 现在，您的链接已经绑定了点击事件。

资源资源

• EventTarget.addEventListener()
• document.querySelectorAll()
• 国际教育展
• 语法和类型

  JavaScript区分大小写，并使用Unicode字符集。