jQuery div προβληματάκι

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
oikonomou
Δημοσιεύσεις: 362
Εγγραφή: 23 Φεβ 2006 10:56

jQuery div προβληματάκι

Δημοσίευση από oikonomou » 15 Φεβ 2012 16:29

Γεια χαρά παιδιά, έχω κολλήσει σε κάτι και δεν μπορώ να βρω 'ακρη.

Έχω κάνει 2 div. Θέλω όταν το ποντίκι πάει πάνω στην μια να εμφανίζεται η άλλη δίπλα. Βρήκα και εφάρμοσα αυτό:

Κώδικας: Επιλογή όλων

#myname{
......
visibility: hidden;
display: block;
}

.hover #myname{
visibility: visible;
}

Κώδικας: Επιλογή όλων

    <script type="text/javascript">
            $&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
                $&#40;function&#40;&#41; &#123;
                    $&#40;"div"&#41;.hover&#40;function&#40;&#41; &#123;
                        $&#40;this&#41;.addClass&#40;"hover"&#41;;
                    &#125;, function&#40;&#41; &#123;
                        $&#40;this&#41;.removeClass&#40;"hover"&#41;;
                    &#125;&#41;;
                &#125;&#41;;
            &#125;&#41;;
    </script>
Ήθελα όταν το ποντίκι πάει πάνω στην div hithere θα εμφανίζετε η div myname.

Το πρόβλημα είναι ότι όταν πάω σε όλες τις div στο έγγραφο φαίνεται η div myname. Το script δουλεύει αλλά για όλες τις div. Δοκίμασα λοιπόν αλλαγές στην jquery και συγκεκριμένα εδώ:

Κώδικας: Επιλογή όλων

$&#40;"div"&#41;.hover&#40;function&#40;&#41;
Άλλαξα σε

Κώδικας: Επιλογή όλων

$&#40;"div hithere"&#41;.hover&#40;function&#40;&#41;

Κώδικας: Επιλογή όλων

$&#40;"div #hithere"&#41;.hover&#40;function&#40;&#41;
και διάφορα άλλα τίποτα. Καμιά βοήθεια;
Έλεος με γκρίκλις πλέον. Γράψτε ελληνικά

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jQuery div προβληματάκι

Δημοσίευση από alou » 15 Φεβ 2012 17:02

Για να καταλάβει κάποιος ακριβώς χρειάζεται και την html που δημιουργείς.

Υποθετικά, αν η html σου είναι κάπως έτσι:

Κώδικας: Επιλογή όλων

 <div class="deiksto">όταν κάνεις εδώ hover φαίνεται το div με class kripsto</div>
<div class="kripsto">Αυτό θα εμφανιστεί αν κάνεις hover στο div με class ferto</div>
Στο css θα κρύψεις το δεύτερο:

Κώδικας: Επιλογή όλων

div.kripsto &#123;display&#58;none;&#125;
και με jquery θα του πεις να εμφανίζει το δεύτερο όταν κάνει hover στο πρώτο

Κώδικας: Επιλογή όλων

$&#40;"div.ferto"&#41;.hover&#40;function&#40;&#41; &#123;
  $&#40;'div.kripsto'&#41;.css&#40;'display', 'block'&#41;;
  &#125;, function&#40;&#41; &#123;
     $&#40;'div.kripsto'&#41;.css&#40;'display', 'none'&#41;;
&#125;&#41;; 
Ή για να είσαι πιο σωστός σε περίπτωση που κάποιος δεν έχει javascript ενεργοποιημένη και δεν θες να κρύψεις το περιεχόμενο, δεν δηλώνεις το display:none μέσω css αλλά προσθέτεις μια επιπλέον γραμμή javascript:

Κώδικας: Επιλογή όλων

$&#40;'div.kripsto'&#41;.hide&#40;&#41;;
$&#40;"div.ferto"&#41;.hover&#40;function&#40;&#41; &#123;
  $&#40;'div.kripsto'&#41;.css&#40;'display', 'block'&#41;;
  &#125;, function&#40;&#41; &#123;
     $&#40;'div.kripsto'&#41;.css&#40;'display', 'none'&#41;;
&#125;&#41;; 
Αν στη σελίδα υπάρχουν παραπάνω από ένα div με τις παραπάνω κλάσεις, αλλάζει το σκηνικό.[/code]

Άβαταρ μέλους
oikonomou
Δημοσιεύσεις: 362
Εγγραφή: 23 Φεβ 2006 10:56

jQuery div προβληματάκι

Δημοσίευση από oikonomou » 16 Φεβ 2012 14:14

Ευχαριστώ φίλε alou.. δούλεψε :D

Μια τελευταία ερώτηση. Αν αντί για class είχαμε id στον κώδικα γιατί δεν δουλεύει το:

Κώδικας: Επιλογή όλων

$&#40;"div#ferto"&#41;.hover&#40;function&#40;&#41; &#123;
  $&#40;'div#kripsto'&#41;.css&#40;'display', 'block'&#41;;
  &#125;, function&#40;&#41; &#123;
     $&#40;'div#kripsto'&#41;.css&#40;'display', 'none'&#41;;
&#125;&#41;; 
Έλεος με γκρίκλις πλέον. Γράψτε ελληνικά

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

jQuery div προβληματάκι

Δημοσίευση από Kypros Lambrou » 16 Φεβ 2012 19:18

oikonomou έγραψε:Ευχαριστώ φίλε alou.. δούλεψε :D

Μια τελευταία ερώτηση. Αν αντί για class είχαμε id στον κώδικα γιατί δεν δουλεύει το:

Κώδικας: Επιλογή όλων

$&#40;"div#ferto"&#41;.hover&#40;function&#40;&#41; &#123;
  $&#40;'div#kripsto'&#41;.css&#40;'display', 'block'&#41;;
  &#125;, function&#40;&#41; &#123;
     $&#40;'div#kripsto'&#41;.css&#40;'display', 'none'&#41;;
&#125;&#41;; 
Μήπως το λάθος σου είναι στο html?
Επειδή απο πλευράς jquery θα έπρεπε να σου δουλεύει.

Για δες εδώ: http://jsfiddle.net/VKgGt/

Αν δεν έχεις το περιεχόμενο σου σε div και το έχεις π.χ. σε span τότε απλά άλλαξε το jquery σου σε:
$("#ferto").hover(function() {
αφαιρώντας το "div" έτσι ώστε να εφαρμόζει σε όλα τα id="ferto" ανεξαρτήτως αν είναι σε div ή όχι

Άβαταρ μέλους
oikonomou
Δημοσιεύσεις: 362
Εγγραφή: 23 Φεβ 2006 10:56

jQuery div προβληματάκι

Δημοσίευση από oikonomou » 17 Φεβ 2012 12:57

Ναι είχα ορθογραφικό λάθος :D

ευχαριστώ για την βοήθεια
Έλεος με γκρίκλις πλέον. Γράψτε ελληνικά

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες