使用jQuery显示隐藏的DIV（无效）

Question

Language: jQuery / Javascript / PHP

I am trying to show a hidden DIV once a user clicks on a link.

There are 3 types of actions that should take place, depending on the value inside data-action attached inside the href tag.

It has 3 possible values:

• shake
• bounce
• default (my problem)

Now using switch , I switch through these actions in the Javascript code.

My problem is, I can't show the hidden div I am trying to target (code under default is where I'm running into some trouble with).

JSfiddle: http://jsfiddle.net/ryxcw/1/ (problem starts at line 59)

Javascript code in use:

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);
          }

        });
    }
  });
}

I really hope someone would be able to help out, I've spent the entire night nitpicking on this thing, I could really use the guidance. Thank you so much for your time!

Once again, here is a JsFiddle for your convenience --
JSfiddle: http://jsfiddle.net/ryxcw/1/ (problem starts at line 59)

Answer 1

You can't use .live() when you generate a jQuery object with anything other than a CSS selector string. That is,

 
 
 
  
  $(this).live(whatever)
 
  

will never work. (well that's not true; .live() doesn't work without a selector string if you're trying to delegate, but when the handler is there on the element directly it works. It's still the case that it's somewhat weird, and .live() is deprecated anyway :-)

Also, you seem to want to find the <div> by looking at the clicked element's "id" value. That doesn't make much sense, because you can't give the same "id" to two different elements (well you can but things don't work very well). In any case, you haven't given the <a> tag an "id" value anyway. ( edit - now I see; you're using the "id" on the <a> as part of the <div> "id". Still, there's no "id" on that <a> element.)

There really are a lot of things wrong in that code. I think you should start with something a lot simpler and work up.

Answer 2

You're doing this

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

but $('.panda').length returns 1 because

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

exists so the action $("#theDIV-" + divID).show(); won't run.

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

ASIDE

Where you've used $(this).live() you should have used $(this).on() (though live will still work there).

You're using data wrong. data-action="something" is stored in the DOM on run. You access its contents using .data('action') not .attr('data-action')

Also I have to agree with Pointy, kind of. There's not so much "a lot of things wrong with the code" but rather, you're doing a lot of things wrong.