TypeError: this.attr is not a function on class hover
TypeError: this.attr is not a function on class hover
所以我有几张图片,我希望它们的 src 在悬停时显示在另一张图片上,然后在不再悬停时重置回原始图像。我想我只是使用 $(this),但我得到
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' />
我认为语法可能有误,但想法不错。有人可以帮我吗?
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
选择器中的拼写错误。
删除第二个函数调用并试试这个
$(".card").on('hover',function(){
var image = $(this).attr('src');
$('.cardpreview').attr('src', $(this).attr('src');
$('.cardpreviw').attr('src', 'http://mtgimage.com/card/cardback.jpg');
});
是的,这是语法错误。要访问当前元素,您必须使用此语法(例如获取元素的特定属性):
$(this).attr('src');
而不是
$(this.attr('src'));
所以我有几张图片,我希望它们的 src 在悬停时显示在另一张图片上,然后在不再悬停时重置回原始图像。我想我只是使用 $(this),但我得到
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' />
我认为语法可能有误,但想法不错。有人可以帮我吗?
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
选择器中的拼写错误。
删除第二个函数调用并试试这个
$(".card").on('hover',function(){
var image = $(this).attr('src');
$('.cardpreview').attr('src', $(this).attr('src');
$('.cardpreviw').attr('src', 'http://mtgimage.com/card/cardback.jpg');
});
是的,这是语法错误。要访问当前元素,您必须使用此语法(例如获取元素的特定属性):
$(this).attr('src');
而不是
$(this.attr('src'));