2010-12-08 38 views
1

Comment écrire ma propre fonction de bascule dans jquery.Fonction d'écriture à bascule à l'aide de jquery show et hide

 
    <head> 
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     <script> 
      $(function(){ 
       $('#dv').bind('click',function(){ 
        $("#toTgl:hidden").show(); 
       }); 
       $('#dv').trigger('click'); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id='dv' onclick="$('#toTgl').hide()"><center>Toggle</center></div> 
     <br/> 
     <div id='toTgl'><center>Change This</center></div> 
    </body> 

deux (montrer & cacher) et se déclenche, je

Répondre

1

Voici ce que je suis venu avec et fonctionnait très bien.

<div id='dv' onclick="alert('test')">Toggle</div> 
    <br/> 
    <div id='toTgl'>Change This</div> 
    <script> 
    function toggle(){ 
     $('#toTgl')[$('#toTgl').is(':hidden')?'show':'hide'](); 
    } 
    function toggleClick(ele){ 
     $(ele).removeAttr('onclick'); 
     $(ele).bind('click', function(ev){ 
      toggle(); 
     }); 
    } 
    function z(id){ return document.getElementById(id);} 
    toggleClick(z('dv')); 
    </script> 
2

Pourquoi ne pas utiliser l'accumulation dans jQuery toggle function?

+0

Je veux aussi un événement onclick sur le div elem. comment ça? – Artha

+1

vous semblez faire cela bien: '$ ('# dv'). Bind ('click', function() { // fais ce que tu veux });' – Thariama

+0

l'a aussi essayé. Les deux événements se déclenchent en même temps :( – Artha

0

Vous avez ajouté deux événements de clic qui sont en conflit. Utilisez un seul gestionnaire d'événements qui affiche et masque l'élément. (Et ne pas utiliser la balise center désapprouvée.)

<head> 
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     $('#dv').click(function(){ 
     $("#toTgl").toggle(); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    #dv { text-align: center; } 
    #toTgl { text-align: center; } 
    </style> 
</head> 
<body> 
    <div id="dv">Toggle</div> 
    <br/> 
    <div id="toTgl">Change This</div> 
</body> 
+0

Mais je ne veux pas utiliser cette méthode de bascule Je veux écrire la mienne sans utiliser la condition 'if' – Artha

+0

@Artha: Je ne vois pas vraiment le but, mais vous pouvez éviter d'utiliser 'if' en utilisant les sélecteurs comme condition:' var x = $ ('# toTgl: hidden'); var y = $ ('# àTgl'). not (x); x.show(); y .hide(); ' – Guffa

+0

Je veux aussi un événement onclick sur le div elem. – Artha