Question

所以我有几张图片，我希望他们的src在它悬停时显示在另一张图像上，然后在不再悬停时重置回原来的图像。我想我只是使用$（this），但我得到

TypeError：this.attr不是函数

＆＃13;

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

＆＃13;

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

＆＃13;

<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' />

＆＃13;

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

Answer 1

this是本机DOMElement。它没有attr()属性。您需要使用$(this)将其转换为jQuery对象来访问jQuery属性和方法。试试这个：

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

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

Answer 2

是的，这是一个语法错误。要访问当前元素，您必须使用此语法（例如，获取元素的特定属性）：

$(this).attr('src');

而不是

$(this.attr('src'));

Answer 3

删除第二个函数调用并尝试此

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

TypeError：this.attr不是类悬停的函数

3 个答案: