jQuery passe dynamique de la valeur de l'id de la fonction

Im nouveau à JS/jQuery.

J'ai eu ce code:

<button id="value1" class="buttonkontakte" onclick="kontakte()">KLICK1</button>
<button id="value2" class="buttonkontakte" onclick="kontakte()">KLICK2</button>
<button id="value3" class="buttonkontakte" onclick="kontakte()">KLICK3</button>

jQuery:

function kontakte(){
    var getthevalue = ???????????????;
    $.ajax({
        type: 'post',
        url: 'post.php',
        data: {wasmachen: "kontakte", value: getthevalue},
        success: function(msg) {
            $('#kontakte').html(msg);
        }
    });
}

Maintenant, quand je clique sur KLICK1 je veux passer "valeur1" pour le var getthevalue. Comment puis-je le faire?

InformationsquelleAutor user3047382 | 2014-09-02
  1. 6

    Simple passage this l'intérieur du code html onclick savoir Qui a appelé la fonction comme:

    <button id="value1" class="buttonkontakte" onclick="kontakte(this)">KLICK1</button>
<button id="value2" class="buttonkontakte" onclick="kontakte(this)">KLICK2</button>
<button id="value3" class="buttonkontakte" onclick="kontakte(this)">KLICK3</button>

    Et la fonction obtenir la valeur comme:

    function kontakte(e){
    var getthevalue = $(e).attr('id');
    $.ajax({
        type: 'post',
        url: 'post.php',
        data: {wasmachen: "kontakte", value: getthevalue},
        success: function(msg) {
            $('#kontakte').html(msg);
        }
    });
}
    • Pourriez-vous m'expliquer ce que (e) est exactement en train de faire?
    • e est l'objet de l'événement qui est passé à la fonction kontakte(). Dans ce exameple j'utilise e mais pourrait être whaterver vous le souhaitez. Et dans le HTML, vous avez besoin de transmettre ce savoir à quel objet événement est l'appel de la clic.
    • Merci 🙂 le JS est vraiment compliqué par rapport à PHP
    InformationsquelleAutor Wilfredo P
  2. 2

    Veuillez vous débarrasser de ces affreux javascript en ligne des gestionnaires d'événements

    $('.buttonkontakte').click(function(){
  value=$(this).attr('id');
   $.ajax({
        type: 'post',
        url: 'post.php',
        data: {wasmachen: "kontakte", value: value},
        success: function(msg) {
            $('#kontakte').html(msg);
        }
    });
});
    • +1, d'ailleurs id est une propriété de l'élément dom, vous pouvez utiliser this.id directement..
    • c'est vrai, j'ai aussi oublié de joindre id entre guillemets, mais maintenant édité
    • Le résultat est "undefined" 🙁 est-ce parce que les boutons sont générés à l'intérieur de la post.php?
    • il est probable que le php n'est pas de revenir sur ce que vous attendez sur la requête ajax. frapper la touche f12 et vérifier votre navigateur onglet réseau pour voir ce qui se passe
    InformationsquelleAutor andrew
  3. 0

    Cela peut être fait par la manipulation de la cliquez avec jQuery comme suit:

    $(document).ready(function() { //Start of the block of jQuery code

    //Define a function which needs a parameter
    function kontakte(getthevalue) {
        $.ajax({
            type: 'post',
            url: 'post.php',
            data: {wasmachen: "kontakte", value: getthevalue},
            success: function(msg) {
            $('#kontakte').html(msg);
        }
        });
    }

    //Handling the on click event via jQuery instead of HTML
    $("#value1").click(function() {
        //Call your function with a parameter now.
        kontakte("value1");

        //Or if you want the passed value to be the same as the id of your button
        var value = $(this).attr('id');
        kontakte(value);
    }

} //end jQuery

    Votre HTML ressemblera:

    <button id="value1" class="buttonkontakte">KLICK1</button>
<button id="value2" class="buttonkontakte">KLICK2</button>
<button id="value3" class="buttonkontakte">KLICK3</button>

    Avec cela, vous allez gérer tout en jQuery depuis, pour autant que je suis concerné, vous ne pouvez pas appeler une fonction dans le onclick attribut lorsque la fonction est déclarée à l'intérieur d'un jQuery bloc. (Corrigez-moi si je me trompe)

    J'espère que cela aide!

    • C'est très bon aussi, mais j'ai besoin d'être actualisées à chaque seconde parce que c'est pour un chat. Mais j'ai appris quelque chose de nouveau avec ça aussi 🙂
    InformationsquelleAutor Sluijsens