javascript 获取被点击的锚标签的 id

Getting the id of the anchor tag which was clicked

提问by rawatadit

This is a list representation of data which is coming from a php database.The list is fetched using a foreach php loop and the data inside the achor tag is populated accordingly.

这是来自 php 数据库的数据的列表表示。使用 foreach php 循环获取列表，并相应地填充 achor 标签内的数据。

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

As you can see here, inside the anchor tag i have href-ed it to a modal box which will show a message whenever the user clicks on any of the link. There is a button in the modal window which will take the user to a different page. The issue is that i want to pass certain value along with the url, but cannot do so as the link to the next page is defined in the modal window specification part. So i came up with this solution. I thought of using the id attribute of the anchor tag, I tried to get the id attribute of the anchor which was clicked using javascript.

正如您在此处看到的，在锚标记内，我将其添加到一个模态框，每当用户单击任何链接时，该框都会显示一条消息。模态窗口中有一个按钮，可以将用户带到不同的页面。问题是我想将某些值与 url 一起传递，但不能这样做，因为下一页的链接是在模态窗口规范部分中定义的。所以我想出了这个解决方案。我想到了使用anchor标签的id属性，我试图获取使用javascript点击的anchor的id属性。

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

From this i wanted to initialize a php variable and then use that php variable to pass as value in the href of the modal window button. But the value i am getting in the alert box is 'undefined' for some reason. I have tried all possible combinations of this.

由此我想初始化一个 php 变量，然后使用该 php 变量作为值传递到模态窗口按钮的 href 中。但是由于某种原因，我在警报框中获得的值是“未定义”。我已经尝试了所有可能的组合。

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

Everything return 'undefined'.

一切都返回“未定义”。

Reference-This is the code for the modal window part.

参考——这是模态窗口部分的代码。

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

回答by Rino Raj

Please try this

请试试这个

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

DEMO

演示

回答by Rakesh Sadhula

You can use other attribute in anchor like :

您可以在锚点中使用其他属性，例如：

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

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

回答by bart

The below jQuery function runs through all the atags on page load and adds idto the end of the link.

下面的 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/

https://jsfiddle.net/yc1hswet/