Question

语言： jQuery / Javascript / PHP

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

应根据data-action标记内附加的 href 内的值，执行3种类型的操作。

它有3个可能的值：

摇
反弹
默认（我的问题）

现在使用开关，我在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行开始）

Answer 1

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

~~$(this).live(whatever)~~

~~永远不会工作。~~（这不是真的; .live()没有选择器字符串如果你正试图委托，但当处理程序直接在元素上时它就可以工作。它仍然是有点奇怪的情况，并且.live()无论如何都被弃用了： - ）

此外，您似乎想通过查看单击元素的“id”值来查找<div>。 ~~这没有多大意义，因为你不能给两个不同的元素提供相同的“id”（你可以，但是事情不能很好地工作）。~~无论如何，你避风港无论如何，<a>标记都给出了“id”值。（编辑 - 现在我看到了;您正在使用<a>上的“id”作为<div>“id”的部分。，<a>元素上没有“id”。）

该代码确实存在很多错误。我认为你应该从更简单的事情开始，并开始工作。

Answer 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/

<强> ASIDE

你曾经使用$(this).live()的地方，你应该使用$(this).on()（虽然直播仍然会在那里工作）。

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

访问其内容

我也同意Pointy的意思。没有那么多“代码有很多问题”，而是你做了很多错事。

用jQuery显示隐藏的DIV（不工作）

2 个答案: