Passer le paramètre à la fonction jQuery

Question

J'utilise jQuery Tools (http://jquerytools.org/) et je ne peux pas obtenir la fonction ci-dessous pour accepter un paramètre passé. Je ne suis pas compétent dans javascript ou jquery et ne peux pas trouver une solution n'importe où qui fera ce travail pour le code ci-dessous. Merci pour toute aide!

configuration actuelle:

<a href='javascript:popup();'>Text Link That Calls Below Function</a> 



<script> 
function popup() { 
if ($("#facebox").hasClass("init")) { 
    $("#facebox").overlay().load(); 
} 
else { 
    $("#facebox").addClass("init"); 
    $("#facebox").overlay({ 

    // custom top position 
    top: 260, 

    mask: { color: '#838383', 
     loadSpeed: 200, 
     opacity: 0.5 
    }, 
    closeOnClick: true, 
    load: true 
    }); 
} 
} 
</script> 

je voudrais qu'il fasse quelque chose comme ça ...

<a href='javascript:popup(apples);'>Text Link That Calls Below Function</a> 



<script> 
function popup(choosebox) { 
if ($("#choosebox").hasClass("init")) { 
    $("#choosebox").overlay().load(); 
} 
else { 
    $("#choosebox").addClass("init"); 
    $("#choosebox").overlay({ 

    // custom top position 
    top: 260, 

    mask: { color: '#838383', 
     loadSpeed: 200, 
     opacity: 0.5 
    }, 
    closeOnClick: true, 
    load: true 
    }); 
} 
} 
</script> 

Answer 1

Vous devez passer une chaîne comme arguement, sauf si vous avez une variable nommée pomme défini ci-dessus (var apples;). Essayez de le changer comme ci-dessous,

<a href='javascript:popup("apples");'>Text Link That Calls Below Function</a> 

Notez les guillemets entourant le popup("apples")

Puisque vous utilisez jQuery, vous pouvez le faire bien comme ci-dessous,

HTML:

<a href='javascript:void(0)' class="aLink" >Text Link That Calls Below Function</a> 

JS:

$(function() { 
    $('.aLink').click(function() { 
     popup("apples"); 
    }); 
}); 

Aussi je pense que vous devrez peut-être changer votre sélection comme ci-dessous,

function popup(choosebox) { 
    var $choosebox = $("#" + choosebox); 

    if ($choosebox.hasClass("init")) { 
     $choosebox.overlay().load(); 
    } 
    else { 
     $choosebox.addClass("init"); 
     $choosebox.overlay({ 
    //..rest of your code 

Answer 2

L'approche discrète javascript est généralement considéré comme mieux et de la manière JQuery.

$('a.someclass').click(function() { popup('orange'); }); 

Fournir vous donner votre élément <a> a une classe de « UneClasse » dans cet exemple.

Ceci permet de garder votre js séparé de votre code HTML. Ce code pourrait aller dans le document prêt événement:

$(document).ready(function() { 
// code here 
}); 

Answer 3

Ecrire un événement de clic pour une classe sur ce point d'ancrage, puis déterminer quelle « boîte » est liée à ce lien en lisant un attribut Data-. Cela vous donnera un bloc générique et réutilisable de code jQuery qui peut être appelé par n'importe quelle balise d'ancrage correspondant à ce modèle.

HTML:

<a href="#" class="popup" data-choosebox="apples">Text Link That Calls Below Function</a>

JavaScript:

$(document).ready(function(){ 

    $('a.popup').on('click', function(e){ 

     var $_target = $('#' + $(this).data("choosebox")); 

     if ($_target.hasClass("init"){ 
      $_target.overlay().load(); 
     } else { 
      $_target.overlay().load({ 

       top: 260, 
       mask: { color: '#838383', 
         loadSpeed: 200, 
         opacity: 0.5 }, 
       closeOnClick: true, 
       load: true 
      }); 
     } 
     e.preventDefault(); 

    }); 

}); 
​