0

我对网页设计和 JQuery 非常陌生·我正在尝试使用 FadeTo 和 13 个不同的图像，当您单击它们时，每个图像都会显示不同的文本框。例如，名为“Pinhole”的照片会显示有关创建针孔相机的文字，名为“obscura”的照片会显示有关相机暗箱的文字，等等。

出于某种原因，我无法让它工作。我尝试了不同的方法，但要么它们会同时消失，要么它们都不能像现在这样工作，或者我会收到一条错误消息。这是我的尝试：

$(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);
    }
    );

});

我尝试了几个教程，但没有一个有效。有人可以给我一个提示吗？那将不胜感激！

4

1 回答 1

0

由于您正在处理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

于 2013-12-03T02:01:07.080 回答