为元素提供多个名称/ 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屋!