Question

我创建了一些按钮翻转和“优雅降级”的缘故，并且为了不为每个图像翻转等编写代码，我尝试来编写更高效的代码。也就是说，我想要做的就是用几行代码，我的翻转对于它们在屏幕上显示的内容变得更加智能。

我试图实现的一件事是，在翻转时，出现在图像div中心的文本（通过css绝对位置）与 alt 图像的属性/元素。

这是带缩略图的reg div：

<div class="imgW"><img src="img src here"/></div>

现在进行翻转，我通过jquery添加它：

$('.imgW').prepend('<div class="portSecRollOver">lopan</div>');

所以在页面渲染时，应该输出如下：

<div class="imgW"> <div class="portSecRollOver">lopan</div> <img src="img src here"/> </div>

在页面加载时，通过css。(display:none);
隐藏portSecRollOver
在翻转时，portSecRollOver通过jquery显示：

$('.imgW').mouseover(function(){ $(this).children('.portSecRollOver').css("display","block"); });

等...

现在在上面这个相同的翻转功能块上，我想做的是翻转时， portSecRollOver div中显示的文本是divs image alt tag的值。

我怎样才能实现这个目标？

我尝试了很多方法，但最终都没有。当我在它上面做一个console.log来测试它时，我总是得到一个“未定义”，这导致我假设我没有针对正确的dom对象。

有什么想法吗？我尝试了很多方法但是，这是为了让你知道我尝试过的东西......比如

$(this).children('.portSecRollOver').html($(this).children('a img').attr('alt'));

先谢谢。

Answer 1

您应该使用.children('img')代替.children('a img')，因为您只有img个孩子，而不是a后跟img。

Answer 2

试试这个：新：http://jsfiddle.net/vSFTU/1/旧：http://jsfiddle.net/sKQpd/

我意识到您希望alt src出现在portSecRollOver下面，应该这样做：http://jsfiddle.net/vSFTU/1/

希望它符合您的需求:)

<强>码

$('.imgW').on('mouseover', function() {
    $(this).children('.portSecRollOver').html($(this).find('img').prop('alt'));
    $(this).children('.portSecRollOver').show();

});

$('.imgW').on('mouseout', function() {

    $(this).children('.portSecRollOver').hide();

});

Answer 3

看起来你走在正确的轨道上，但正如João指出的那样，你的代码中没有<a>标签。这就是你需要的：

$('.imgW').mouseover(function() {
    var portSecRollOver = $(this).children('.portSecRollOver');
    var img = $(this).children('img');
    portSecRollOver.html( img.attr('alt') );
    portSecRollOver.show();
});

JsFiddle：http://jsfiddle.net/bM25f/1/

Answer 4

您可以通过编码this way轻松实现，或者如果您想要更有趣的内容，可以将其设为this。

协助jquery .children

4 个答案: