Donner un élément de noms multiples / ID

J'ai rencontré quelques publications insistant sur le fait qu'une ID est utilisée une seule fois.

Cependant, je dois passer 2 variables php à mon javascript. J'avais l'intention d'utiliser le document.getElementById mais comme je ne peux qu'un seul identifiant, cela ne fonctionnera pas.

Y a-t-il d'autres moyens d'y parvenir?

Mon code:

 <a data-toggle="modal" data-id="prodModal" presID="<?php echo $selectPresForJs->valueof('pres_id'); ?>" prodID="<?php echo $prod->prod_id; ?>" data-target="#prodModal" class="image_modal" > <img class="image-modal" style="width: 192px; height:192px;" src="<?php echo $prod->prod_icon; ?>"> <span ><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></span> </a>

Les deux variables que je dois passer sont les presID et prodID . Trouvé dans l'élément <a> .

MODIFIER

Après une suggestion, j'ai réécrit mon code comme suit:

 <a data-toggle="modal" data-id="prodModal" data-presId="<?php echo $selectPresForJs->valueof('pres_id'); ?>" data-prodId="<?php echo $prod->prod_id; ?>" data-target="#prodModal" class="image_modal" > <img class="image-modal" style="width: 192px; height:192px;" src="<?php echo $prod->prod_icon; ?>"> <span ><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></span> </a>

Le javascript que j'utilise fait comme suit:

 $(document).ready(function(){ $('#prodModal').click(function() { var ajaxprodId = $('#prodModal').data('prodId'); var ajaxpresId = $('#prodModal').data('presId'); /*Console Prints the variables as undefined*/ console.log(ajaxprodId); console.log(ajaxpresId); $.ajax({ url: "path/to/file/Presentation.php", type: "POST", data: {prodId : ajaxprodId,presId:ajaxpresId} ,success: function(data){ console.log("Success was achieved"); document.getElementById("modal_content").innerHTML = "Works"; }, error: function(data){ console.error("The action was unsuccessfull"); alert(data); } }); }); });

Puisque la réponse de Leopard, d'un point de vue technique, n'est pas complètement correcte, je vais jeter mes deux cents dans:

Sur le côté HTML, vous utilisez des attributs de données personnalisés comme suit:

 <a class="image_modal" data-toggle="modal" data-id="prodModal" data-pres-id="<?php echo $selectPresForJs->valueof('pres_id'); ?>" data-prod-id="<?php echo $prod->prod_id; ?>" data-target="#prodModal"> <img class="image-modal" style="width: 192px; height:192px;" src="<?php echo $prod->prod_icon; ?>"> <span> <h2 style='color:#2468A6'> <b><?php echo $prod->prod_name ?></b> </h2> </span> </a>

Maintenant, en utilisant JavaScript, vous y accédez comme suit:

 var product = document.getElementById('prodModal'); product.dataset.presId // contains value of 'pres_id' product.dataset.prodId // contains value of 'prod_id'

Notez ici la différence: HTMl spécifie les attributs de données personnalisés en séparant les mots avec des tirets qui se traduisent automatiquement en variables et propriétés de cas de chameaux, par exemple, data-foo-id est accessible via dataset.fooId .

Pour plus d'informations détaillées, consultez la spécification du W3C sur l'ensemble de données .

De plus, respectez les directives de nomenclature HTML et JavaScript en utilisant fooId au lieu de fooID .

Dans le cas où vous souhaitez utiliser jQuery, vous utiliserez ceci:

 $('#prodModal').data('presId'); // contains value of 'pres_id' $('#prodModal').data('presId'); // contains value of 'prod_id'

Jetez un coup d'œil qui accède via les données () aussi.

Vous pouvez utiliser des attributs html personnalisés comme les data-presID et les data-prodID

 data-presID="<?php echo $selectPresForJs->valueof('pres_id'); ?>"

Vous pouvez accéder à ces variables en javascript en ciblant l'élément a.

 var ele = document.getElementById("yourelementID"); var pressID = ele.attributes["data-presID"].value;