Aide avec AJAX et HTML

Question

J'ai le code HTML similaire à

<div class="menu"> 
    <div>Latest</div> 
    <div>Oldest</div> 
</div> 

boucle I à tous les éléments en JavaScript et lier un écouteur d'événement de clic sur eux. Maintenant, dans le rappel de l'événement, je voudrais savoir quelles données à récupérer via AJAX. Comment puis-je comprendre cela à partir d'un élément? Je sais que je devrais mettre quelque chose dans l'article pour déterminer le type d'article, mais où puis-je le mettre? Je ne suis pas sûr à 100% sur ce que vous demandez.

Answer 1

Si vous utilisez seulement div, en utilisant un className serait pratique et valide. Comme ceci:

<div class="menu"> 
    <div class="latest">Latest</div> 
    <div class="oldest">Oldest</div> 
</div> 

... 

function divClickHandler(event) { 
    var div = event.target; 
    if (div.className == 'latest') 
    // load latest 
    else if (div.className == 'oldest') 
    // load oldest 
} 

Si vous utilisez html5, une solution serait encore mieux en utilisant custom data- attributes; comme ceci:

<div class="menu"> 
    <div data-type="latest">Latest</div> 
    <div data-type="oldest">Oldest</div> 
</div> 

La solution la plus élégante serait en utilisant a balises au lieu des div s et intercepter leurs clics:

<div class="menu"> 
    <a href="?whatever">Latest</a> 
    <a href="?barfoo">Oldest</a> 
</div> 

... 

function aClickHandler(event) { 
    var a = event.target; 
    // do your ajax call using a.href 
    return false; 
} 

Answer 2

Mais si vous cherchez à mettre des "données utilisateur" sur les éléments, vous pouvez simplement utiliser un attribut et sélectionner l'attribut en JavaScript.

<div class="menu"> 
    <div userdata="Latest">Latest</div> 
    <div userdata="Oldest">Oldest</div> 
</div> 

Answer 3

Vous pouvez spécifier par une classe ou id. par exemple.

<div class="menu"> 
    <div class="latest">Latest</div> 
    <div class="oldest">Oldest</div> 
</div> 

Testez-le avec element.className dans la boucle.

Answer 4

Il aurait été utile de spécifier de quel type d'éléments vous parlez.

Cependant, vous pouvez reconnaître un élément à partir de son identifiant. Ou vous pouvez spécifier votre propre attribut et le récupérer.

Exemple:

HTML:

<button id='mybtn' attr1='123'>click here</button> 

javascript:

$("#mybtn").bind('click', function() { 

    var attr = $(this).attr('attr1'); 

    // use attr value for any specific logic 

});