js onclick事件不适用于我的项目组合
js onclick事件不适用于我的项目组合
提问于 2012-06-22 12:41:51
我的js onclick事件对我的作品集不起作用。页面可以在这里看到：http://www.savantgenius.com/portfolio/branding，脚本如下：
<script type="text/javascript">
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + ' #portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
$('a.focusElement').focus();
});
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + ' #portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}
将显示正在加载的动画，但没有图像。任何想法都非常感谢，谢谢！
回答 3
Stack Overflow用户
发布于 2012-06-22 12:53:21
根据@Christian Varga的评论，您需要返回HTML，并将源代码设置为您创建的链接。尝试如下所示：
$("#portItem").html($("<img>")
.attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));而不是.load()行。
所以我猜你的最终函数应该是这样的：
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$("#portItem").html($("<img>")
.attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));
// UPDATE:
setTimeout(function () {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
}, 1000);
});}
Stack Overflow用户
发布于 2012-06-22 13:17:12
检查此解决方案：
HTML：
<div id="portItem"><img /></div>JS：
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent');
$('#portItem img').load(function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
});
function get_portfolio(portLocation) {
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent');
//check if image is loaded, then hide loader + show image:
$('#portItem img').load(function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}查看演示：http://jsfiddle.net/esqmr/1/
Stack Overflow用户
发布于 2012-06-22 12:52:30
尝试删除#portLoadedContent前的空格
<script type="text/javascript">
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
$('a.focusElement').focus();
});
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11150287
复制相关文章
相似问题
腾讯云开发者
