我可以使用 jQuery 使 DIV 及其内容可见和不可见吗？

Question

I have DIVs on my form. I would like to use javascript to make these visible or invisible depending on some operation. Currently I am doing this:

$('#token2').html("<div style='padding: 2px 4px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border: 1px solid Red;'><span style='color: Red; '>Incorrect</span></div>");

and setting the contents of the DIV each time. Is there a way I can set this in CSS and just change a visible property instead?

Answer 1

$(#token2).toggle() will toggle the visibility, show() and hide() do the specific operations. Give it the style "display: hidden" to start it off invisible.

Answer 2

How about .hide() and .show() ?

---

Not directly related to your question, but since you mentioned CSS, I'd really recommend just defining the styles outside of the HTML...embedded in the JS... something like this:

#token2 > div {
    padding: 2px 4px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid red;
}

#token2 > span {
    color: red;
}

which simplifies the JavaScript down to

$('#token2').html('<div><span>Incorrect</span></div>');

although the .html() part is really irrelevant anyway, with the previously mentioned jQuery methods.

Answer 3

use this

.hidden {display:none}

<span id="incorrect-answer"  class="hidden">Incorrect</span>

and then use jQuery.addClass and.removeClass to make it visible/invisible

eg

$("#incorrect-answer").addClass("hidden")
$("#incorrect-answer").removeClass("hidden")