如何使用jQuery获取attr？

Question

<div class="item">
  <p><img src="images/photos_sample1.jpg" 
          border="0" rel="images/google_map.jpg"></p>
  <p>Dining Area</p>
</div>
<div class="item">
  <p><img src="images/photos_sample2.jpg" 
          border="0" rel="images/sample_photo.jpg"></p>
  <p>Pool Area</p>
</div>

我有上面的HTML代码,我想rel在单击图像时获取属性的值.我写了这个jQuery脚本,但它似乎不起作用:

$('div.item').click(function() {
  var getvalue = $('this > p > img').attr('rel');
  alert(getvalue);
});

Answer 1

替换这个:

var getvalue = $('this > p > img').attr('rel');

有了这个:

var getvalue = $(this).find('p > img').attr('rel');

就像现在一样,您正在使用文字标签名称进行全局搜索 this

等效代码也将是:

var getvalue = $('p > img', this).attr('rel');

虽然从它的外观来看,这些项目是图像/标题组合,你不会真正期待其他图像,在这种情况下,最好只做:

var getvalue = $(this).find('img').attr('rel');

或者也许给它一个描述性的类并替换img为img.someclassname- 这将使得如果你以后编辑你的HTML,你的Javascript不会因为你的特定选择器而中断.

此外,您可以将click事件绑定到图像本身:

$('div.item img').click(function() {
    var getvalue = $(this).attr('rel');
});