jQuery查找功能不起作用

Question

I'm trying to do a pop-ip type thing using javascript and for some reason it doesn't work. It shows no errors either.

<div style="cursor:pointer;" onclick="displayTickets('2013-12-27')" 
 onmouseover="displayMenu(this)" 
 onmouseout="hideMenu(this)" 
 bgcolor="#CCCCCC" width="14%" height="64" align="left" valign="top">
    27 Pre New Years Hotel Takeover
    <div class=".cPopUp" id="cPopUp5" style="position:absolute;z-index:1000;width:384px;height:192px;background-color:rgba(0,100,0,.8);left:0;top:0;right:0;padding:8px;text-allign:left;">
        <h4>Pre New Years Hotel Takeover</h4>
    </div>
</div>

.cPopUp is obviously the pop up I want to .show()/.hide()

this is javascript:

function displayMenu(el)
{
$(el).find(".cPopUp").show(500);

}

function hideMenu(el)
{
    $(el).find(".cPopUp").hide(500);
}

if I do

 $(el).hide(500);

It hides the whole thing, so I know that works well, but I guess it's not finding anything?

Answer 1

The class name is

class=".cPopUp"

ie it literally contains a period. You would have to use .\\.cPopup as selector.

But that's horrible, you should change the HTML to

class="cPopUp"

instead. This allows you to use the current selector ( .cPopup , the class ( . ) with name cPopup ).

Answer 2

Your error is how you write the className in the HTML:

<div class="cPopUp" id="cPopUp5" style="position:absolute;z-index:1000;width:384px;height:192px;background-color:rgba(0,100,0,.8);left:0;top:0;right:0;padding:8px;text-allign:left;">
    <h4>Pre New Years Hotel Takeover</h4>
</div>

There should not be a "." when you write the className in the html, only when you declare it in the CSS

Answer 3

When setting a class for a tag never use the dot before the class name. Only uses dot when manipulating the selector.

<div class="cPopUp"></div>

Try it!

Answer 4

它应该是class="cPopUp"而不是class=".cPopUp"