Jak schować diva po kliknięciu przycisku Za Pomocą JQuery ?

pytanie zadane 16 sierpnia 2015 w JavaScript przez McShadow Obywatel (1,050 p.)

Witam,mam problem z zchowaniem diva za pomocą jquery nie wiem co jest nie tak w kodzie Proszę o pomoc co jest nie tak !

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
<div id="witaj">
<button id="button">OK</button>
</div>

</body>

<head>
</html>

CSS

#button {
    display: block;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    padding: 10px;
    margin: 15px 0px 0px 15px;
    font-size: 18px;
    text-transform: uppercase;
    background: #ED5E2F;
    color: #FFF;
    border: 0px none;
    outline: 0px none;
    top:0;
    left:0;
    position:fixed;
    z-index:100;
}

#button:hover {
    background: #74A599;
}

#button:active {
    background: #F6A953;
}
#witaj
{
color:white;
text-align:center;
background-color:#545A5C;
width:400px;
height:40px;
top:15;
left:40;
position:fixed;
z-index:100px;
}

JS

$("#button").click(function()
{

$("#witaj").hide();

});

1 odpowiedź

odpowiedź 16 sierpnia 2015 przez Magicone Nałogowiec (45,100 p.)
wybrane 16 sierpnia 2015 przez McShadow

Najlepsza

Skrypt ładowany i wykonywany jest wcześniej, niż załadowanie contentu strony, co za tym idzie - odnoszenie się do $("#button"), to tak naprawdę odniesienie sie do niczego. Zrób to tak:

$(document).ready(function(){
	$("#button").click(function(){
		$("#witaj").hide();
	});
});

Albo jeszcze lepszy sposób, na koniec css dodaj takie linijki:

.hidden{
	display: none;
}

i javascript:

window.addEventListener('DOMContentLoaded', function(){
	document.getElementById('button').addEventListener('click', function(){
		document.getElementById('witaj').classList.add('hidden');
	});
});

Do użycia tego skryptu nie potrzebujesz jQuery, pzdr! :-)

Pokaż 22 poprzednich komentarzy

komentarz 16 sierpnia 2015 przez McShadow Obywatel (1,050 p.)

http://pastebin.com/W3sREz3t

komentarz 16 sierpnia 2015 przez Magicone Nałogowiec (45,100 p.)

Polecam jeszcze raz zobaczyć jak działa wstawianie skryptów w HTML'u. Nie potrzebnie podłączyłeś dwa takie same skrypty. Tag <script> powinno umieszczać się zgodnie ze specyfikacją w head, te nieładne zastosowania po body, albo nawet w są niefajne, a prostym sposobem redukcji błędów, przez które ludzie wstawiają tam te tagi jest właśnie window.addEventListener('DOMContentLoaded', fun) czy jak kto woli $(document).ready(fun). ;-)

@Boshi odnosząc się do poprzedniego Twojego posta, wbrew pozorom nie potraktowałem tego jako atak; doceniam fakt, że każdy może mieć swoje zdanie. Dla jednych liczy się prostota użytkowania, dla innych umiejętność korzystania z wbudowanego API. Dlatego właśnie podałem dwa rozwiązania, niech wybierze to, co mu odpowiada.