言語: 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 行目から始まります)