Witam,
Zaczynam się bawić jquery i dla cwiczenia znalazlem zadanie ktore polega na tym aby po najechaniu kursorem elementu #listy pojawił się ten teskt w całkiem innej pustej sekcji np. z niebieskim tłem. Oczywiście gdy juz kursor nie bedzie na elemencie to ta druga sekcja ma być z powrotem pusta.
Probuje metodami hoover, mouseout itp itd, ale nic mi nie wychodzi. Proszę o pomoc, albo chcociaż naprowadzenie na prawidłową ścieżkę ;)
Pokaż kod.
<!DOCTYPE html>
<html>
<head>
<title>zadanie</title>
</head>
<body>
<section id="section">
</section>
<ul id="list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
</body>
</html>
pokaż jak próbowałeś, i czemu ci nie wychodzi.
Słabo opisałeś problem, jeśli dobrze zrozumiałem o co ci się rozchodzi to ten kod powinien cię naprowadzić.
$(document).ready(function()
{
$('#list li').hover(function()
{
var text = $(this).text();
$('#section').text(text);
},
function()
{
$('#section').text('');
});
});
chodzi o to ze jak najade na jakies li z #list to tekst tego li ma pojawić się w sekcji #section, a jak zjade myszka z tego to #section ma być z powrotem puste. Czyli Twoja podpowiedz to mniej wiecej to co juz potrafie zrobić, ale problem w tym jak mam ten konkretny li na ktory najezdzam pokazać w #section.
Zerknij teraz:
https://jsfiddle.net/h5j4us5q/
Kurde... Działa :)
Byłem blisko...
Dzięki wielkie..
Mam ostatnie pytanie na które pewnie bez probklemu uzyskam odpowiedz od Ciebie.
Jak ukryc wszystkie li ktore znajdują sie ponizej konkretnego li ktory ma np jakis atrybut.
np. tak:
html:
<!DOCTYPE html>
<html>
<head>
<title>zadanie</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<section id="section">
</section>
<ul id="list">
<li>lorem</li>
<li name='lastNotHide'>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
js:
$(document).ready(function()
{
var hide = false;
$('#list li').each(function()
{
if(hide) $(this).hide();
if($(this).attr('name') == 'lastNotHide') hide = true;
});
});
Z tym że nie jestem szpecem od JQuery więc może jest jakiś bardziej elegancki sposób :)
$(document).ready(function(){
$("#button").click(function(){
$("#list").fadeOut();
});
});
Przykładowo ten kod po nacisnieciu chowa mi cala liste i to potrafie zrobic. Ale jak to udoskonalić zeby chował mi tylko to co naaprzyklad jest ponizej ipsum z atrybutem title='ipsum'
:)
kreis84 napisał(a):
<ul id="list">
<li>lorem</li>
<li name='lastNotHide'>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
js:
$(document).ready(function()
{
var hide = false;
$('#list li').each(function()
{
if(hide) $(this).hide();
if($(this).attr('name') == 'lastNotHide') hide = true;
});
});
Jest. W css definicja ul li[name="lastNotHide"] ~ li { display: none; } (general sibling selector). Będzie znacznie wydajniej, łatwiej w utrzymaniu (mniej kodu i za wygląd odpowiada właściwa warstwa - css) i użytkownikowi nic nie będzie migać.