Question

我是网页设计和JQuery的新手。我正在尝试使用FadeTo和13个不同的图像，当你点击它们时，每个图像都会出现一个不同的文本框。例如，名为“Pinhole”的照片会显示一个关于针孔相机创建的文字，一个名为“暗箱”的照片会出现关于相机暗箱的文字，等等。

出于某种原因，我无法让它发挥作用。我尝试了不同的东西，但要么它们都会同时淡出，要么它们都不会像现在这样工作，否则我会得到一条错误信息。这是我的尝试：

$(document).ready(function(){

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){

    $(pinhole).fadeTo('slow',0.5);
    }, function(){
    $(pinholeText).stop().fadeTo('slow',1);
    }
    );

    $(obscura).fadeTo('slow',0.5);
    }, function(){
    $(obscuraText).stop().fadeTo('slow',1);
    }
    );

    $(heliography).fadeTo('slow',0.5);
    }, function(){
    $(heliographyText).stop().fadeTo('slow',1);
    }
    );

    $(daguerreotype).fadeTo('slow',0.5);
    }, function(){
    $(daguerreotypeText).stop().fadeTo('slow',1);
    }
    );

    $(calotype).fadeTo('slow',0.5);
    }, function(){
    $(calotypeText).stop().fadeTo('slow',1);
    }
    );

    $(wetc).fadeTo('slow',0.5);
    }, function(){
    $(wetcText).stop().fadeTo('slow',1);
    }
    );

    $(drygel).fadeTo('slow',0.5);
    }, function(){
    $(drygelText).stop().fadeTo('slow',1);
    }
    );

    $(kodak1).fadeTo('slow',0.5);
    }, function(){
    $(kodak1Text).stop().fadeTo('slow',1);
    }
    );

    $(leica2).fadeTo('slow',0.5);
    }, function(){
    $(leica2Text).stop().fadeTo('slow',1);
    }
    );

    $(polaroid).fadeTo('slow',0.5);
    }, function(){
    $(polaroidText).stop().fadeTo('slow',1);
    }
    );

    $(dslr).fadeTo('slow',0.5);
    }, function(){
    $(dslrText).stop().fadeTo('slow',1);
    }
    );

    $(cellphone).fadeTo('slow',0.5);
    }, function(){
    $(cellphoneText).stop().fadeTo('slow',1);
    }
    );

    $(future).fadeTo('slow',0.5);
    }, function(){
    $(futureText).stop().fadeTo('slow',1);
    }
    );

});

我尝试了几个教程，但没有一个有用。有人可以给我一个提示吗？非常感谢！

Answer 1

由于您使用click()处理multiple selectors事件，因此您需要检查点击了哪一个，然后定位相应的文字。

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){

    $(this).fadeTo('slow',0.5);

    if($(this).is('#pinhole')){
        $('#pinholeText').fadeTo('slow',1);
    }

    if($(this).is('#obscura')){
        $('#obscuraText').fadeTo('slow',1);
    }
    //and so on...
});

但这样做效率很低，因为它类似于逐一进行：

$('#pinhole').click(function(){
    $(this).fadeTo('slow',0.5);
    $('#pinholeText').fadeTo('slow',1);
});

$('#obscura').click(function(){
    $(this).fadeTo('slow',0.5);
    $('#obscuraText').fadeTo('slow',1);
});

但是，如果您可以更改标记并将img和text包裹在<div>中。像这样：

<div id="pinhole">
    <img id="pinholeImg" src="" />
    <p id="pinholeText">Pinhole text</p>
</div>

然后你的jQuery将是：

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){
    $(this).children('img').fadeTo('slow',0.5).siblings('p').fadeTo('slow',1);
});

请参阅此jsfiddle

FadeTo几个不同的图像

1 个答案: