javascript - 如何使用 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 - 这样如果您稍后在 Javascript 上编辑 HTML 就不会由于您的特定选择器而中断。

此外，您可以将点击事件绑定(bind)到图像本身:

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