TypeError: this.attr is not a function on class hover

Question

so I have a couple of images, and I want their src to display on another image when it hovers, and then reset back to its original when not hovering anymore. I figured I'd just use $(this), but I get

TypeError: this.attr is not a function

$(".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' />

I figure the syntax is probably wrong, while the idea is good. Can anybody help me out?

Answer 1

this is the native DOMElement. It has no attr() property. You need to convert it to a jQuery object by using $(this) to access jQuery properties and methods. Try this:

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

Note I also fixed the typo in the second .cardpreview selector.