Question

我发现了一些帖子，强调ID只使用一次。

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

还有其他方法可以达到这个目的吗？

我的代码：

<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>

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

修改

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

<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>

我使用的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

您可以使用自定义html属性，例如data-pres-id和data-prod-id

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

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

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

Answer 2

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

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

<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>

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

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

请注意这里的区别：HTMl通过用破折号分隔单词来指定自定义数据属性，这些破折号自动＆＃34;翻译＆＃34;进入驼峰案例变量和属性，e。 G。可以通过data-foo-id访问dataset.fooId。

有关更深入的信息，请参阅W3C's specification on dataset。

此外，请使用fooId代替fooID来遵守HTML和JavaScript命名准则。

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

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

请查看通过data()访问的内容。

给一个元素多个名字/ id＆＃39; s

2 个答案: