2012-07-07 5 views
0

Je veux faire fonctionner avec le paramètre. Je travaille avec le code ci-dessous, mais cela ne fonctionne pas. Quelqu'un peut-il me dire ce que je fais mal.Fonction de paramètre dans jquery

<head> 
    <script type="text/javascript" src="jquery-1.7.2.js"></script> 
    <script type="text/javascript"> 
     $(function hide(fn){ 
      $(fn).click(function(){ 
       $('div').hide() 
      }) 
     }) 
    </script> 
    <style> 
     div { width:500px; height:500px; background:#FF0000; } 
    </style> 
</head> 
<body> 
    <button onclick="hide(this)">click for hide</button> 
    <a href="#">click</a> 
    <button>click</button> 
    <div></div> 
</body> 
+0

Sur quel objet voulez-vous pouvoir cliquer pour cacher les divs? 'fn' n'est pas un élément. –

+0

j'ai deux ou peut avoir plus de bouton en html et je ne wana leur donner id ou classe ce pourquoi je veux utiliser le paramètre – Carlos

Répondre

1

Une chose importante: vous devriez écrire unobtrusive JavaScript, car il est considéré comme la meilleure pratique. Avec lui, vous pouvez maintenir une séparation du contenu du code. Ainsi, la première étape consiste à supprimer ce gestionnaire onclick sur l'élément <button>.

Je suppose que vous voulez cliquer sur le bouton qui dit "cliquez pour cacher" pour cacher le <div>. Ok, alors allons-y un peu de code dans le squelette à <script>:

$(document).ready(function() { 
    $(<button>).click(function() { 
     $(<div>).hide(); 
    }); 
}); 

Mais nous devons relier en quelque sorte que gestionnaire click à ce bouton, et le lien qui hide fonction à la div réelle. Voici la façon la plus simple de faire ceci: donnez vos ID <button> et <div>. Disons que ...

<button id="hide-button">...</button> 
<div id="hide-div">...</div> 

Maintenant, nous avons simplement besoin de faire quelques modifications à notre code squelette:

$("#hide-button").click(function() { 
    $("#hide-div").hide(); 
}); 

Voici ce que ce code simple fait. Lorsque votre DOM se charge, une fonction sans nom (vous ne pouvez pas nommer les fonctions que vous définissez à la volée *) est appelée à partir de l'événement ready du document. Cette fonction sans nom associe le gestionnaire click à votre bouton #hide-button, de sorte que lorsque vous cliquez sur le bouton, une autre fonction anonyme est appelée. Cette fonction appelle hide, ce qui fait de la magie jQuery qui fonctionne dans tous les navigateurs, sur ce #hide-div div pour le masquer.

* Eh bien, vous pouvez, mais seulement si vous les définissez d'abord, puis les transmettre.Comme ceci:

var fn = function() {...}; 
$(document).ready(fn); 

Modifier

Étant donné que le demandeur ne veut pas utiliser des ID ou des classes, voici une solution alternative:

<script> 
    function hide() { 
     $('div').hide(); 
    } 
</script> 
... 
<button onclick="hide()">click for hide</button> 
<div></div> 

Veillez à ne pas placer function hide() au sein du document jQuery l'idiome prêt. Cela vous empêchera d'accéder à hide() en raison de la portée.

+0

en fait j'ai deux bouton en html et je ne leur donne wana id ou classe que je veux utiliser le paramètre. comme

+0

Modifié pour cette solution – kibibyte

0

Votre code fait actuellement rien de plus que défini le gestionnaire de clic lorsque vous cliquez sur le bouton.

Si vous voulez continuer à utiliser le gestionnaire onclick sur l'élément button, puis changez votre fonction hide simplement $('div').hide() (sans la partie $(fn).click). Si vous préférez utiliser la fonction click pour définir le gestionnaire, supprimez l'attribut onclick de l'élément button et dans la fonction en haut, modifiez $(fn).click à $('#button').click, après avoir donné à votre bouton un identifiant de button.

0

Vous confondez la fonction compacte jQuery ready() avec quelque chose d'autre, donc j'utiliser la syntaxe lisible $(document).ready() à la place:

$(document).ready(function() { 
    $('.hide').on('click', function(){ 
     $(this).next('div').hide() 
    }) 
}) 

Et changer votre code HTML un peu:

<button class="hide">click for hide</button> 

lieu de lier la fonction à l'élément, lier le gestionnaire d'événements aux éléments avec une classe de hide. Lorsque vous cliquez dessus, recherchez l'élément <div> le plus proche et masquez-le.

+0

Juste pour ajouter à cette réponse, jQuery est plus lent avec des classes (comme '.hide') parce qu'il a besoin pour trouver tous les éléments sous une certaine classe et leur ajouter des gestionnaires. Utilisez des classes si vous prévoyez de pouvoir cliquer sur plusieurs boutons pour masquer quelque chose. D'un autre côté, les ID sont plus rapides car ils ne sont autorisés qu'à se référer à un élément (même si les navigateurs sont généralement indulgents à ce sujet). – kibibyte

+0

Pour le mettre en perspective, pouvez-vous noter quelle échelle de temps vous parlez ici? – Blender

+0

Si nous parlons d'une seule instance d'un bouton, il y a en effet très peu de différence dans le temps. La différence est plus perceptible lorsque [en utilisant de nombreuses instances de sélecteurs de classe jQuery] (http://jsperf.com/id-vs-class-vs-tag-selectors/2); Bien sûr, vous ne rencontrerez pas ce problème à moins de créer des applications Web complexes. – kibibyte

Questions connexes