Question

好的，所以我试图根据标题在悬停时更改5张图片。我有一个代码，它部分工作，我相信我写的不正确。所以我将发布两次尝试，希望有人能理解我想要做的事情。

$(document).ready(function() { 
var found = $('.user-basic-info img'); 
 found.filter('[src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png"]')
  .hover(function(){
 $(this).closest('img').replaceWith('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adming10.png"/>');
 });
});



$(document).ready(function() { 
var found = $('.user-basic-info img'); 
 found.filter('[src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png"]')
  .hover(function(){
 $(this).closest('img').onMouseEnter('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adming10.png"/>').onMouseOut('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png"/>');
 });
}); //this code works partly as well, I just get no method of onMouseEnter

首次使用悬停效果来回更改图像。我还需要能够使这个兼容与其他5个图像一起工作，所以我必须为每个“src”或者更确切的标题

设置变量

为了澄清.filter的一个问题，我们可以为标题做同样的事吗？像这样[title="Founder"]只是想知道因为上面（关于变量）我想知道我是否可以写...

var a = $('.user-basic-info img').filter('[title="Founder"]');

var b = $('.user-basic-info img').filter('[title="Founder"]');

只是想知道

我正在使用的代码::

$(function(){
var a = $('.user-basic-info img[title=Founder]');
var b = $('.user-basic-info img[title=Manager]');
var c = $('.user-basic-info img[title=Members]');
var d = $('.user-basic-info img[title=Technician]');
var e = $('.user-basic-info img[title=Moderator]');
var f = $('.user-basic-info img[title=Presidential]');
  $(div.post).hover(function() {
 a.attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adming10.png');
  },
function() {
  a.attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png');
 });
});

Answer 1

你可以试试这个：

$(document).ready(function() { 
    $('.user-basic-info img[title=Founder]').hover(
        function() {
            $(this).attr('src', "http://i13.servimg.com/u/f13/17/83/35/07/adming10.png");
        },
        function() {
            $(this).attr('src', "http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png");
        }
    );
});

Answer 2

closest('img')永远不会有效，因为图片没有后代。从方法链中删除它：

$(this).replaceWith('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adming10.png"/>');

如果你的最终目标是在悬停时切换src属性，只需这样做，而不是替换整个图像：

$(this).attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adming10.png');

也可以按标题属性进行过滤。您发布的代码段应该可以正常工作。

Answer 3

<img class=".user-basic-info" title="Founder" src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png">


$('.user-basic-info img[title=Founder]').hover(function() {
    $(this).attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adming10.png');
},
function() {
    $(this).attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png');
});

这样的事情对你有用吗？

http://jsfiddle.net/Q6XMA/5/

基于标题在悬停时更改图像

3 个答案: