pass parameter to click event of a class-CodePudding

I have this code

<div style="float:left">
  <div >
    <i id="reply@{@item.Id}"  onclick="CommentReply(@item.Id)"></i>
  </div>                            
</div>

and js

 function CommentReply(id)
 {
    //to do something
 }

but I want to change to

  $(".test-comment").click(function () {
    //to do something

    // I need Id in here
})

how can I pass the Id parameter to test-comment click event?

CodePudding user response：

Try with data attributes: test code here

HTML

<div style="float:left">
  <div >
    <i data-id="10" data-xx="other x"  >some text</i> 
  </div>
</div>

Remove onclick= ... and use data-* for your info.

$(".test-comment").click(function () {
    alert($(this).data("id"));
    alert($(this).data("xx"));
})

snippet <3

$(".test-comment").click(function () {
    alert($(this).data("id"));
    alert($(this).data("xx"));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:left">
  <div >
    <i data-id="10" data-xx="other x"  >CLICK ME!</i> 
  </div>
</div>

CodePudding user response：

With this in plain JS, added helloo just for testing

function CommentReply(el){
  //  `el` here is `this` passed from `onclick` is the reference to the element
  console.log(el.id);
}

<div style="float:left">
  <div >
    <i id="reply@{@item.Id}"  onclick="CommentReply(this)">helloo</i>
  </div>                            
</div>

click on helloo and see console for id