Dev Faq
12
votes

Comment écrire une fonction simple?

Comment créez-vous une fonction dans jQuery, appelez-la et transmettez-la une variable? Ici, il est dans le style Javascript: xxx

alors vous incluez simplement l'événement dans le HTML: xxx

Quel est l'équivalent de jQuery à Ce faisant? De tous les tutoriels "Newbie", ils sont toutes des fonctions statiques qui n'acceptent pas les variables. Par exemple: xxx

Je veux pouvoir inclure de manière dynamique des messages différents. Le code ci-dessus affecte tous les boutons et crache le même message de 'Hello, World'.

5 commentaires

JQuery n'est pas une langue, au fait. Tout ce que vous pouvez faire en JavaScript ne sera pas cassé juste en incluant JQuery.

Qu'est-ce qui est sur le côté serveur? ASP.NET, PHP, etc ...

@Raycheng pourquoi cela serait-il pertinent? ;)

Pour développer ce que @Minitech a dit, jQuery étend la fonctionnalité de JavaScript. JQuery n'a pas de moyen différent de créer une fonction. Au lieu de cela, ce que JQuery offre (entre autres) est un meilleur moyen d'appeler ou de déclencher vos fonctions JavaScript. Dans votre exemple, JQ vous donne un moyen simple d'exécuter une fonction lorsqu'il détecte le bouton Cliquez sur l'événement.

@Niko, si OP utilise le formulaire Web ASP.NET, l'approche commune serait alerte ('<% = getMessage ()%>');

9 Réponses :

2
votes 
$(document).ready(function() {
    var message = "foo"; // You might need to move it to the global scope,
                         // denepends on what you want to do with it.
  $('button').click(function() {
    alert(message);
   });
   ...
   ...
   message = "hello world";
});
Worth saying sbout:
  How do you create a function in jQuery
There is no such thing, create a function in jQuery.
2 commentaires

La variable, le message, est toujours à l'intérieur de la fonction de base jQuery. Comment puis-je coller mes messages dynamiques? Je ne peux pas transmettre aucune variables dans les fonctions de jQuery? JQuery est-il seulement bon pour les effets et les animations?

@ user785179. Si vous expliquez ce que vous voulez exactement, vous pouvez passer des paramètres aux événements.

1
votes

Si vous êtes absolument obligé de stocker les données du code HTML, les attributs de données sont un bon choix: 

$(document).ready(function() {
  $('button.alert').click(function() {
      var msg = $(this).data('msg');  // access HTML attribute data-msg
      alert(msg);
  });
});

0 commentaires
0
votes

Une solution: utiliser des attributs tels que le paramètre. 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('button').click(function() {
    alert($(this).attr("message"));
   });
});
</script>
<button message="personal message 1">Botton 1</button>
<button message="personal message 1">Botton 2</button>

0 commentaires
3
votes

Vous devez stocker le message dans un DATA - * CODE> Attribut: 

$('button').click(function() {
    alert($(this).data('message'));
});

2 commentaires

S'il vous plaît expliquer plus en détail

@ user785179. Vous devriez expliquer plus en détail que vous essayez exactement de faire ..

4
votes

Vous donneriez à chaque bouton une carte d'identité différente, comme: xxx

alors: xxx

aussi, si la tâche est également Très répétitif, vous pouvez utiliser une autre fonction pour créer la fonction: xxx

0 commentaires
16
votes

Si vous souhaitez que le message soit dynamique, vous souhaitez utiliser attributs de données code>: xxx pré>

puis dans un fichier JavaScript séparé: xxx pré>

maintenant La fonction exécutera à tout moment une touche avec la classe .Message-bouton code> est cliquée et utilisera le message de données d'attribut personnalisé à Afficher un message. P>

J'espère que cela aide! :) p>

mise à jour: p>

Notez qu'il est considéré comme une meilleure pratique de faire de JavaScript sans obstruction. Certaines personnes ont mentionné toujours en utilisant l'attribut onclick code> comme vous l'avez fait dans votre exemple, ne faites pas cela. Lier l'événement comme je l'ai montré ici à l'aide de .on de jQuery ("click ', fonction () {}) code> méthode. P>

si votre élément de clic est une balise d'ancrage code> alors vous pouvez empêcher que le HREF d'être suivi si vous le souhaitez, en utilisant e.preventdefault code>: p> xxx pré>

aussi Si vous auriez besoin de savoir, le $ ('. Bouton de message') code> utilise des sélecteurs CSS pour saisir des éléments DOM. Tout sélecteur CSS valide fonctionnera normalement là-bas. P>

étape par étape strong> p>

Tout d'abord, nous devons envelopper tout notre code dans une fonction fournie par JQuery qui attend que le document soit prêt à gérer les actions JavaScript et la manipulation DOM. La version de formulaire long est $ (document) .Ready (fonction (fonction (fonction () {/ * code va ici * /}) code> mais la version que j'ai utilisée est un raccourci $ (fonction (fonction ( {/ * Code va ici * /}) code>: p> xxx pré>

Suivant, nous devons lier un événement à notre bouton. Puisque nous l'avons donné la classe. .Message-Botton CODE>, nous pouvons utiliser JQuery pour saisir cet élément et lier l'événement "Cliquez sur" sur l'événement: P> 

$(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});

1 commentaires

Merci, j'apprécie l'explication approfondie et votre solution, même si j'avoue que je ne l'obtiens toujours pas. Je suis tellement habitué à travailler avec PHP et JavaScript, que l'idée de contraignante à des événements et de travailler avec elle est complètement étranger pour moi. Je vais faire une pause et relire votre explication plus tard pour voir si je commence à l'absorber.

0
votes

J'ai essayé certaines des suggestions et cela fonctionne bien ..

- bouton HTML xxx

- jQuery sur le bouton Cliquez sur < Pré> xxx

0 commentaires
6
votes

C'est ma meilleure façon de le faire, tout comme JavaScript:

---- Fonctionner en utilisant jQuery comme ceci h2> 
<html>
<input type="submit" onclick="popup('My Message')" />
</html>

0 commentaires
0
votes 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>


function getUnitPrice(){
        var item = document.getElementById('item').value;
        if(item==0){
            document.getElementById('unitprice').value = "36000.00";
        }
        if(item==1){
            document.getElementById('unitprice').value = "2500.00";
        }
        if(item==2){
            document.getElementById('unitprice').value = '14000.00';
        }
        if(item==3){
            document.getElementById('unitprice').value = '40000.00';
        }
        if (item==" "){
            document.getElementById('unitprice').value = '0';
        }


}

function calcSubtotal(){
    var qty = document.getElementById('quantity').value;
    var price = document.getElementById('unitprice').value;
    if(isNaN(qty)||isNaN(price)){
        alert("Please enter valid values");

    }
    else{
        var subtotal= eval(price) * eval(qty);
        document.getElementById('subtotal').value = subtotal;
    }




}


function calcDiscount(){

    var discRate = document.getElementById('discountRate').value;
    var discAmount = document.getElementById('subtotal').value;

    if(isNaN(discRate)||isNaN(discAmount)){
        alert("Please enter valid discount");
        return;
    }
    if(discRate < 5 || discRate > 20 ){
        alert("Please enter valid discount");
        return;
    }

    var discount = eval(discAmount) * eval(discRate)/100;
    document.getElementById('discountAmount').value = discount;
    document.getElementById('total').value= discAmount - discount;



}

function calcBalance(){

    var cash = document.getElementById('cash').value;
    var total = document.getElementById('total').value;

    if(isNaN(cash)){
        alert("Enter valid amount");
        return;
    }

    var bal = eval(total) - eval(cash);
    document.getElementById('balance').value = bal;



}

</script>

</head>

<body class="container">
    <div class="panel panel-primary" style="margin-top: 10px;">
        <div class="panel-heading">
            <p style="font-size: 36px; margin: 0;"><strong>Kumara Super Centre</strong></p>
            <p style="font-size: 16px; margin: 0;">No. 300, Ja-ela Road, Gampaha. Tel: 033-2232526</p>
        </div>
        <div class="panel-body">
        <table class="table table-hover">
            <tr>
                <th class="text-center">Item</th>
                <th class="text-center">Quantity</th>
                <th class="text-center">Unit Price</th>
                <th class="text-center">Amount</th>
            </tr>
            <tr>
                <td class="col-lg-5">
                    <select class="form-control" id="item" required onChange="getUnitPrice()">
                        <option value="">Select one</option>
                        <option value="0">Television</option>
                        <option value="1">FM Radio</option>
                        <option value="2">DVD Player</option>
                        <option value="3">Surround System</option>
                    </select>
                </td>
                <td class="col-lg-2">
                    <input class="form-control" type="number" value="0" id="quantity" name="quantity" required onKeyUp="calcSubtotal()" />
                </td>
                <td class="col-lg-2">
                    <input class="form-control" type="number" value="0" id="unitprice" name="unitprice" readonly />
                </td>
                <td class="col-lg-3">
                    <input class="form-control" type="number" value="0" id="subtotal" name="subtotal" readonly />
                </td>
            </tr>
        </table>
        <table class="table" style="float: right; width: 600px;">
            <tr style="border:none">
                <td class="text-center col-lg-3"><strong>Discount Rate (%)</strong></td>
                <td class="col-lg-2"><input class="form-control" type="number" value="0" id="discountRate" name="discountRate" onKeyUp="calcDiscount()" /></td>
                <td class="col-lg-3"><input class="form-control" type="number" value="0" id="discountAmount" name="discountAmount" readonly /></td>
            </tr>
            <tr style="border-top:none">
                <td class="text-center"><strong>Total</strong></td>
                <td></td>
                <td><input class="form-control" type="number" value="0" id="total" name="total" readonly /></td>
            </tr>
            <tr style="border:none">
                <td class="text-center"><strong>Cash</strong></td>
                <td></td>
                <td><input class="form-control" type="number" value="0" id="cash" name="cash" onKeyUp="calcBalance()" /></td>
            </tr>
            <tr style="border:none">
                <td class="text-center"><strong>Balance</strong></td>
                <td></td>
                <td><input class="form-control" type="number" value="0" id="balance"  name="balance" readonly /></td>
            </tr>
        </table>

        </div>



    </div>
</body>
</html>
1 commentaires

Bienvenue pour, c'est toujours une bonne idée d'ajouter une explication à votre code.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO