为元素提供多个名称/ ID [英] Giving an element multiple names/id's
问题描述
我遇到过几个帖子，强调一个ID只能使用一次。
但是我需要将2个php变量传递给我的javascript。我打算使用 document.getElementById 但由于我只能有一个ID，所以这是行不通的。
有没有其他方法可以实现这一目标？
我的代码：
< a data-toggle =modaldata-id =prodModalpresID =<？php echo $ selectPresForJs-> valueof（'pres_id'）;？> prodID =<？php echo $ prod-> prod_id;？> data-target =＃prodModalclass =image_modal>
< img class =image-modalstyle =width：192px; height：192px; src =<？php echo $ prod-> prod_icon;？>>
< span>< h2 style ='color：＃2468A6'>< b><？php echo $ prod-> prod_name？>< / b>< / h2> < /跨度>
< / a>
我需要传递的两个变量是 presID 和 prodID 变量。找到< a> 元素。
编辑
在建议之后，我重写了我的代码，如下所示：
< a data- toggle =modaldata-id =prodModaldata-presId =<？php echo $ selectPresForJs-> valueof（'pres_id'）;？> data-prodId =<？php echo $ prod-> prod_id;？> data-target =＃prodModalclass =image_modal>
< img class =image-modalstyle =width：192px; height：192px; src =<？php echo $ prod-> prod_icon;？>>
< span>< h2 style ='color：＃2468A6'>< b><？php echo $ prod-> prod_name？>< / b>< / h2> < /跨度>
< / a>
我使用的javascript看起来如下所示：
$（document）.ready（function（）{
$（'＃prodModal'）。click（function（）{
var ajaxprodId = $（'＃prodModal'）。data（'prodId'）;
var ajaxpresId = $（'＃prodModal'）。data（'presId'）;
/ * Console将变量显示为未定义* /
console.log（ajaxprodId）;
console.log（ajaxpresId）;
$ .ajax（{
url：path / to / file / Presentation.php，
类型：POST，
data：{prodId：ajaxprodId，presId：ajaxpresId}
，成功：函数（数据）{
console.log（成功已实现）;
document.getElementById（modal_content）。innerHTML =Works; $ b $ （b），
错误：函数（数据）{
console.error（行为不成功）;
alert（data）;
}
}）;
}）;
}）;
从技术角度来看，是不完全正确的，我会抛出我自己的两美分：
在HTML方面，您使用自定义数据属性，如：
< a class =image_modaldata-toggle =modaldata-id =prodModal
data- pres_id =<？php echo $ selectPresForJs-> valueof（'pres_id'）;？>
data-prod-id =<？php echo $ prod-> prod_id;？>数据目标= ＃prodModal >
< img class =image-modalstyle =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>
现在，使用JavaScript，您可以像这样访问它：
var product = document.getElementById（'prodModal'）;
product.dataset.presId //包含'pres_id'的值
product.dataset.prodId //包含'prod_id'的值
请注意这里的区别：HTMl通过用破折号分隔单词来指定自定义数据属性，这些破折号自动翻译为骆驼大小写变量和属性，e 。 G。 data-foo-id 通过 dataset.fooId 。
有关更深入的信息，请参阅 W3C规范数据集。
另外，请遵守HTML和JavaScript命名准则，使用 fooId 代替 fooID 。
如果你想使用jQuery，你可以使用：
$（'＃prodModal'）。data（'presId'）; //包含'pres_id'的值
$（'＃prodModal'）。data（'presId'）; //包含'prod_id'的值
请查看通过 data（）。
I have come across a few posts emphasizing that an ID is only used once.
However I need to pass 2 php variables to my javascript. I intended to use the document.getElementById but since I can only have one ID, this will not work.
Are there any other ways to achieve this?
My 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>
The two variables I need to pass are the presID and the prodID variables. found in the <a> element.
EDIT
After a suggestion I have rewrote my code as follows:
<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>
The javascript I am using looks as follows:
$(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);
}
});
});
});
Since Leopard's answer, from a technical point of view, isn't completely correct, I'll throw my own two cents in:
On the HTML side, you use custom data attributes like so:
<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>
Now, using JavaScript, you'd access it like this:
var product = document.getElementById('prodModal');
product.dataset.presId // contains value of 'pres_id'
product.dataset.prodId // contains value of 'prod_id'
Please note the difference here: HTMl specifies custom data attributes by separating words with dashes which get automatically "translated" into camel case variables and properties, e. g. data-foo-id is accessed via dataset.fooId.
For more in-depth information, please see the W3C's specification on dataset.
Additionally, please obey HTML and JavaScript naming guidelines by using fooId instead of fooID.
In case you want to use jQuery, you'd use this:
$('#prodModal').data('presId'); // contains value of 'pres_id'
$('#prodModal').data('presId'); // contains value of 'prod_id'
Please have a look that access via data(), too.
这篇关于为元素提供多个名称/ ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
