如何在onclick function中发送两个参数id和name？

Question

在这里，我在 html 中有许多用户（定义了 id、名称、角色）。当我单击其中一个用户时，它会显示模态，并且在此模态中我想显示该用户的 id、名称和角色。 我只能显示 id。 我怎样才能显示名称和角色？

html

   {% for user in users %}
         <li>
           <i class="fas fa-user-circle"></i>{{ user.name }}, {{user.role}}
            <a href="" class="text-primary" onclick = "send_message({{user.id}} )">Message</a>
          </li>
   {% endfor %}

脚本

function send_message(id){
  event.preventDefault();
  $('#sendmessage').modal('show');
  $('#send_message_modal_title').text("Send Message to User");
  $('#sendmessage').on('shown.bs.modal', function (e) {
    $("#user_id").val(id);
    $("#user_name").val(name, role);
    
  })

模态的

<input name="cleaner" id="user_id">
 <input type="text" value="name and role" class="form-control">  #how to display name and role ?

Answer 1

我认为您可以简单地将名称和角色传递给 send_message function，如下所示：

{% for user in users %}
         <li>
           <i class="fas fa-user-circle"></i>{{ user.name }}, {{user.role}}
            <a href="" class="text-primary" onclick = "send_message({{user.id}}, '{{ user.name }}', '{{user.role}}'  )">Message</a>
          </li>
{% endfor %}

并在这里访问它：

function send_message(id, name, role){
  event.preventDefault();
  $('#sendmessage').modal('show');
  $('#send_message_modal_title').text("Send Message to User");
  $('#sendmessage').on('shown.bs.modal', function (e) {
    $("#user_id").val(id);
    $("#user_name").val(`${name} ${role}`);
  })
}

如果您使用 JavaScript 来实现点击功能。 尝试以下操作：假设锚标签有一个 class 的节目名称

<script type="text/javascript">
        // User array of objects
        var users = [{id:1, name: "Shubham", role: "admin"}, {id:2, name: "Robert", role: "admin"}];

        // Add event listener
        buttons  = document.querySelectorAll(".show");
        index = 0;
        for(let button of buttons) {
            button.addEventListener('click', ()=>{
                send_message(users[index++])
            })
        }

        // get user here
        function send_message(user) {
            console.log(user);
        }
</script>

Answer 2

首先要避免内联处理程序，它们现在有太多问题不值得使用，尤其是 escaping 问题（您将在此处遇到）。 使用带有addEventListener的 Javascript 或 jQuery 正确附加事件监听器。 您可以将数据绑定到具有数据属性的元素：

<li>
  <i class="fas fa-user-circle"></i>{{ user.name }}, {{user.role}}
  <a href="" class="text-primary" data-id="{{user.id}}" data-name="{{user.name}}" data-role="{{user.role}}">Message</a>
</li>

和

$('.text-primary').on('click', (e) => {
  const { id, name, role } = e.target.dataset;
  // attach id, name, and role to modal as desired
});

Answer 3

我想你可以简单地发送用户 object 作为参数

html

... onclick="send_message({{user}})" ...

脚本

function send_message(user){
    var id = user.id;
    var name = user.name;
    var role = user.role;
    ....
}