给一个元素多个名字/ id

我遇到过一些post，强调ID只使用一次。

但是我需要将2个php变量传递给我的javascript。 我打算使用document.getElementById但因为我只能有一个ID，所以这不起作用。

有没有其他方法可以实现这一目标？

我的代码：

 <a data-toggle="modal" data-id="prodModal" presID="valueof('pres_id'); ?>" prodID="https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_id; ?>" data-target="#prodModal" class="image_modal" > <img class="image-modal" style="width: 192px; height:192px;" src="https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_icon; ?>"> 
https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_name ?>  

我需要传递的两个变量是presID和prodID变量。 在元素中找到。

编辑

在提出建议后，我重写了我的代码如下：

 <a data-toggle="modal" data-id="prodModal" data-presId="valueof('pres_id'); ?>" data-prodId="https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_id; ?>" data-target="#prodModal" class="image_modal" > <img class="image-modal" style="width: 192px; height:192px;" src="https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_icon; ?>"> 
https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_name ?>  

我使用的javascript看起来如下：

 $(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); } }); }); }); 

Answer 1

从技术的角度来看，Leopard的回答并不完全正确，我将把自己的两分钱投入：

在HTML方面，您使用自定义数据属性，如下所示：

    
 https://stackoverflow.com/questions/39324922/giving-an-element-multiple-names-ids/prod_name ?> 
   

现在，使用JavaScript，您可以像这样访问它：

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

请注意这里的区别：HTMl通过用破折号分隔单词来指定自定义数据属性，这些单词会自动 “翻译”为驼峰大小写变量和属性，例如data-foo-id通过dataset.fooId访问。

有关更深入的信息，请参阅W3C关于数据集的规范 。

此外，请使用fooId而不是fooID遵守HTML和JavaScript命名准则。

如果你想使用jQuery，你可以使用：

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

请看一下通过data（）访问。

Answer 2

您可以使用自定义html属性，如data-presID和data-prodID

 data-presID="valueof('pres_id'); ?>" 

您可以通过定位a元素在javascript中访问这些变量。

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