Получение идентификатора привязанного тега, который был нажат.

Question

Это представление списка данных, которое поступает из базы данных php. Список выбирается с использованием петли foreach php, и данные внутри тега ахора заполняются соответствующим образом.

<?php foreach($array as $iterate):?> 
<div class="col-sm-3"> 
    <div class="panel panel-default"> 
    **<a onClick='theFunction();' id="hello" href="#myModal" style="text-decoration:none;">** 
    <div class="panel-heading"> 
    <img src ="audi_sillhouete.jpg" style="height:100%; width:100%;"> 
     <p id="10" style="position:absolute; top:10%; padding-left:5%; padding-right:15%;"><?php echo $iterate->test_name ?></p> 
    </div> 
    </a>      
    </div> 
</div> 
<?php endforeach;?> 

Как вы можете видеть здесь, внутри тега привязки у меня есть HREF-й изд его в поле модального которое покажет сообщение, когда пользователь нажимает на любом из ссылки. В модальном окне есть кнопка, которая приведет пользователя к другой странице. Проблема в том, что я хочу передать определенное значение вместе с URL-адресом, но не могу сделать этого, поскольку ссылка на следующую страницу определена в части спецификации модального окна. Итак, я придумал это решение. Я думал об использовании атрибута id тега привязки, я попытался получить атрибут id якоря, который был нажат с помощью javascript.

<script type="text/javascript"> 
function theFunction() 
{ 
    var id = $('a', this).attr('id'); 
    alert(id); 
}</script> 

Из этого я хотел, чтобы инициализировать переменную PHP, а затем использовать эту переменную PHP, чтобы передать в качестве значения в HREF кнопки модального окна. Но значение, которое я получаю в окне предупреждения, по какой-то причине «неопределено». Я пробовал все возможные комбинации этого.

$('a',this).attr('id'); 
$this.id; 

Все возвращается 'undefined'.

Ссылка-это код для части модального окна.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Instructions</h4> 
     </div> 
     <div class="modal-body"> 
     Your test is about to commence. A timer will be initiated after the moment you start the test. You may choose to answer a question, or leave it empty. You can also attempt the questions in any order that you find suitable.<br><br>Upon completion of the test, click on "Submit" to see your performance statistics.<br><br><br>Good luck! 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <a href="../test/pretest.php?test=<?php echo $testname?>" style="text-decoration:none;color:white;"><button type="button" class="btn btn-primary">Continue</button></a> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Answer 1

Пожалуйста, попробуйте это

$(document).on('click', 'a', function() { 
    alert(this.id); 
}); 

DEMO

Answer 2

Вы можете использовать другие атрибуты анкера, как:

<a href='' id='hello' para-id='somevalue'></a> 

alert($("#hello").attr("para-id")); 

Answer 3

Ниже функция JQuery проходит через все a тегов при загрузке страницы добавляет id до конца ссылки.

$(function(){ 
    $('a').each(function(){ 
     var id = $(this).attr('id'); 
     var url = $(this).attr('href') + '?id=' + id; 
     $(this).attr('href',url); 
     }); 
}); 

https://jsfiddle.net/yc1hswet/