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! :-)

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

Tyle, że jest dużo krótszy :)

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

krótszy !== lepszy :P

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

$("#button").click(function() Tutaj jest wymagany # czy nie??

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

$('#nazwa') wskazuje na div, posiadający atrybut id równy "nazwa".

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

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

Tak, o ile do sposobu pierwszego umieścisz w css linijki z .hidden

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

Tego nie powiedziałem, ale napisać 3 krótki linijki a napisać 3 linijki rozwlekłe na caly ekran, bo nazwa metody składa sięz 3 członów ?

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

IMO jest to kwestia przyzwyczajenia. A to, że podałem alternatywę, która uczy dobrych nawyków chyba nie było niczym złym. :P

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

coś nie działa tak wygląda kod zapewne coś źle zrobiłem http://pastebin.com/4HjSHM54

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

Już działa dziekuje za pomoc

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

@magic, czemu próbujesz na siłę interpretować moje słowa jako atak... po prostu wydaje mi się, że w tym wypadku Jquery jest imo dużo bardziej przejrzyste. Jak skorzysta z czystego js ok, świat się nie zawali. To była moja osobista opinia i nadal jest :)

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

Dziwne sposób z czystym js działa a z jquery nie co sie dzieje ??

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

A dodałeś w ogóle bibliotekę ?

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

$(document).ready(function(){
    alert();
});

Jeśli po załadowaniu strony nie wyświetli się alert, to znaczy, że nie masz poprawnie załadowanego jQuery.

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

Tak wersje 1.11.3

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

Nie wyświetla sie co zrobić

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

może spróbuj wstawić http: przed // w atrybucie src skryptu z jquery.

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

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

A jak poprawnie załadowac JQuery??

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

To co podałem jest bibliteką Jquery

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

Nie działa klikam ok na stronie i skrypt sie nie wywołuje

komentarz 16 sierpnia 2015 przez Boshi VIP (100,240 p.)

Pokaż cały kod na pastbina.

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.