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不会因为您的特定选择器而中断。< / p>

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

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

Answer 2

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

Answer 3

你不能像这样使用'this'。

尝试：

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

如何使用jQuery获取attr？

3 个答案: