语言:jQuery / Javascript / PHP
一旦用户单击链接,我就会尝试显示隐藏的 DIV。
根据标签内data-action
附加的值,应该执行 3 种类型的操作。href
它有 3 个可能的值:
- 摇
- 弹跳
- 默认(我的问题)
现在使用switch,我在 Javascript 代码中切换这些操作。
我的问题是,我无法显示我试图定位的隐藏 div(默认代码是我遇到问题的地方)。
JSfiddle: http: //jsfiddle.net/ryxcw/1/(问题从第 59 行开始)
使用的Javascript代码:
function loadBubbleActions() {
$('#container > a').each(function () {
switch ($(this).attr('data-action')) {
case "shake":
//bind shake action to bubble
$(this).live("click", function (e) {
var props = $.parseJSON($(this).attr('data-action-properties'));
var ox = $(this).css('left').replace('px', '');
var oy = $(this).css('top').replace('px', '');
if ($('#tae').length == 0) {
var overlay = jQuery('<div id="overlay" style="background-color: #fff !important; background-image: url(images/texture-shake.jpg);"> </div>');
overlay.appendTo(document.body)
$(document.body).append('<div id="tae" class="shake" style="position:absolute;opacity:1;z-index:12000;">Info goes here</div>');
$('#overlay').click(function () {
$('#overlay').remove();
$('#tae').remove();
});
var cssWidth = ($(this).css('width').replace('px', '') / 2 - 20);
var cssHeight = ($(this).css('height').replace('px', '') / 2 - 20);
var ss = ($(window).width() / 2);
var dd = ($(window).height() / 2);
$('#tae').css('left', (ss - cssWidth) + "px");
$('#tae').css('top', (dd - cssHeight) + "px");
$('#tae').effect("shake", {
times: 5
}, 500);
} else {
$('#tae').effect("shake", {
times: 5
}, 500);
}
});
break;
case "bounce":
//do specific action stuff here
$(this).live("click", function (e) {
alert("This is a bouncing post " + $(this).attr('data-link'));
});
break;
default:
//do action code for default here
$(this).live("click", function (e) {
divID = $(this).attr('id');
var props = $.parseJSON($(this).attr('data-action-properties'));
var act = $(this).attr('data-action');
var ox = $(this).css('left').replace('px', '');
var oy = $(this).css('top').replace('px', '');
if ($('.panda').length == 0) {
$("#theDIV-" + divID).show();
$("#overlay").show();
$('#overlay').click(function () {
$('#overlay').remove();
$('.panda').remove();
});
var cssWidth = ($(this).css('width').replace('px', '') / 2 + 400);
var cssHeight = ($(this).css('height').replace('px', '') / 2 - 20);
var ss = ($(window).width() / 2);
var dd = ($(window).height() / 2);
$('.panda').css('left', (ss - cssWidth) + "px");
$('.panda').css('top', "100px");
} else {
//$('#tae').effect("shake", { times:props.shakeNumber }, 200);
}
});
}
});
}
我真的希望有人能帮忙,我整晚都在吹毛求疵,我真的可以使用指导。非常感谢您的参与!
再次,为了您的方便,这里有一个 JsFiddle——
JSfiddle:http: //jsfiddle.net/ryxcw/1/(问题从第 59 行开始)