0

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

4

2 回答 2

2

.live()当您使用CSS 选择器字符串以外的任何内容生成 jQuery 对象时,您不能使用。那是,

$(this).live(whatever)

永远不会工作。(好吧,这不是真的;如果.live()您尝试委托,则没有选择器字符串就无法工作,但是当处理程序直接在元素上时它可以工作。它仍然有些奇怪,并且无论如何都已弃用:- ).live()

此外,您似乎想<div>通过查看单击元素的“id”值来找到 。这没有多大意义,因为你不能给两个不同的元素提供相同的“id”(你可以,但事情不是很好)。 在任何情况下,您都没有给<a>标签一个“id”值。(编辑-现在我明白了;您在“id”上使用“id”<a>作为“id”的一部分。不过,该元素<div>上没有“id” 。)<a>

该代码中确实有很多错误。我认为你应该从更简单的事情开始,然后继续努力。

于 2013-01-05T22:10:19.177 回答
2

你在做这个

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')not访问其内容.attr('data-action')

我也必须同意Pointy,有点。没有那么多“代码有很多问题”,而是你做错了很多事情。

于 2013-01-05T22:34:46.253 回答