javascript - alert individual attribute value

Question

I want to identify each element by it's name attribute. Each element has the same class and will ultimately contain differing dynamic information.

For example I would want the following code to alert the individual element's name value:

html:

<p class="pexample" name="0">this is p #1</p>
<p class="pexample" name="1">this is p #2</p>
<p class="pexample" name="2">this is p #3</p>

jquery:

$('p').on('click', function() {
    if ($('p').attr('name') !== undefined) {
        alert($('p').attr('name'));
    }
})

Here is a jsfiddle.. http://jsfiddle.net/XG7nd/1/

This code however only alerts the initial elements name value. Help is greatly appreciated.

Answer 1

This should do:

$('p').on('click', function() {
   var name = $(this).attr('name');// `this` here refers to the current p you clicked on
   if (name ) {
        alert(name); 
    }
})

While doing $('p').attr('name') this will always give you the name of the first item in the collection.

Demo

Answer 2

尝试这个：

$(document).on('click','p', function() {
    alert($(this).attr('name'));
});

演示

Answer 3

你想用$(this)

$('p').on('click', function() {
    if($(this).attr('name') !== 'undefined') {
        alert($(this).attr('name'));
    }
});

Answer 4

发生这种情况是因为您在每次点击时都获得了name第一个属性。<p>您需要指定事件的来源：

$('p').on('click', function() {
if ($(this).attr('name') !== undefined) {
    alert($(this).attr('name'));
}
})

注意，jQuery 选择器返回一个匹配元素的数组。您必须使用this关键字来获取当前上下文中元素的句柄。

小提琴

Answer 5

解释

即使在 上，您也会继续寻找p元素click，因此它将选择找到的第一个元素。

你的代码说什么：

什么时候p点击：

• 找到一个p元素并提醒它的属性。

---

你真正想要的：

什么时候p点击：

• 提醒被点击元素的属性

---

解决方案

选择 的属性this，即被点击的元素。

JSFiddle

JavaScript

$('p').on('click', function() {
    if ($(this).attr('name') !== undefined) {
        alert($(this).attr('name'));
    }
})

阅读有关this关键字的更多信息。