javascript - 使用 jQuery 显示隐藏的 DIV(不起作用)

Question

语言:jQuery/Javascript/PHP

我试图在用户单击链接后显示隐藏的 DIV。

应执行 3 种类型的操作，具体取决于 href 标记内附加的 data-action 内的值。

它有 3 个可能的值:

• 摇晃
• 弹跳
• 默认(我的问题)

现在使用switch，我可以在 Javascript 代码中切换这些操作。

我的问题是，我无法显示我试图定位的隐藏 div(default 下的代码是我遇到一些麻烦的地方)。

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 行开始)

Answer 1

你正在这样做

if ($('.panda').length==0) {
      $("#theDIV-" + divID).show();

但是$('.panda').length返回1，因为

<div class="panda hiddenDIV" id="theDIV-77" style="position:absolute;z-index:12000;">This is the content</div>

存在，因此操作 $("#theDIV-"+ divID).show(); 将不会运行。

http://jsfiddle.net/ryxcw/2/

旁白

在您使用过 $(this).live() 的地方，您应该使用 $(this).on() (尽管 live 仍然可以在那里工作) .

您使用的数据有误。 data-action="something" 在运行时存储在 DOM 中。您可以使用 .data('action') 而不是 .attr('data-action')

访问其内容

我也必须同意 Pointy 的观点。与其说“代码有很多问题”，不如说你做错了很多事情。