Предоставление элемента нескольких имен/id

Question

Я столкнулся с несколькими сообщениями, в которых подчеркивается, что идентификатор используется только один раз.

Однако мне нужно передать 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>.

EDIT

После предложение я переписал свой код следующим образом:

<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 стороне, можно использовать пользовательские данные атрибуты, как так :

<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 определяет атрибуты пользовательских данных, разделяя слова с тире, которые автоматически получают «переведены» в переменные и свойства верблюда, например. г. data-foo-id доступен через dataset.fooId.

Для получения более подробной информации см. W3C's specification on dataset.

Кроме того, следуйте инструкциям по именованию HTML и JavaScript, используя fooId вместо fooID.

В случае, если вы хотите использовать 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="<?php echo $selectPresForJs->valueof('pres_id'); ?>" 

Вы можете получить доступ к этим переменным в javascript, настроив элемент a.

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