类型错误：this.attr 不是类悬停时的函数

Question

所以我有几个图像，我希望它们的 src 在悬停时显示在另一个图像上，然后在不再悬停时重置回原始图像。我想我只会使用 $(this)，但我明白了

类型错误：this.attr 不是函数

$(".card").hover(
function () {
    var image = $(this.attr('src'));
    $('.cardpreview').attr('src', $(this.attr('src')));
},

function () {
    $('.cardpreviw').attr('src', 'http://mtgimage.com/card/cardback.jpg');
});

.card {
    width:120px;
    height:170px;
}
.cardpreview {
    width:480px;
    height:680px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
<img class='cardpreview' alt='card missing' src='http://mtgimage.com/card/Craw Wurm.jpg' />

我认为语法可能是错误的，而这个想法是好的。有人可以帮我吗？

Answer 1

this是原生的 DOMElement。它没有attr()财产。您需要通过使用$(this)访问 jQuery 属性和方法将其转换为 jQuery 对象。尝试这个：

$(".card").hover(function () {
  $('.cardpreview').attr('src', $(this).attr('src'));
}, function () {
  $('.cardpreview').attr('src', 'http://mtgimage.com/card/cardback.jpg');
});

注意我还修复了第二个.cardpreview选择器中的错字。