如何获取与另一个具有相同类别的输入值？答案

【问题标题】：how to get values of input which has the same class as another?如何获取与另一个具有相同类别的输入值？
【发布时间】：2023-01-12 18:50:37
【问题描述】：

我有一个页面根据我在搜索功能中找到的结果数量呈现 div，然后在这些 div 中我隐藏了一些关于找到的用户的信息的输入，其中一个隐藏的输入是 ID，我想要的发生的是当用户单击任何一个 div 中的名称标签时，我想使用 jquery 将该隐藏的 id 输入字段值保存到一个变量中，以便我可以使用它来确定下一步要转到的页面将它作为参数添加到 url 中。我正在使用 Jquery、Twig 和 PHP。

$(document).ready(function (){
        $('.search-result-name').click(function (){
            var lawyerId = $('.search-result-id').val();
            window.location.href = "/profile?lawyerId="+lawyerId;
        })
        
    })

<div class="search-result-info">
                <input type="hidden" value="{{ item.id }}" class="search-result-id">
                <input type="hidden" value="{{ item.verifiedLicense }}" class="search-result-id" id="verified-license">
                <div class="search-result-name">{{ item.firstName }} {{ item.lastName }}</div>
</div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以通过输出需要在 div 元素的元数据中检索的值来简化方法。然后您可以在引发的事件中从元素引用中检索该值，如下所示：

jQuery($ => {
  $('.search-result-name').on('click', e => {
    const $element = $(e.target);
    var lawyerId = $element.data('lawyerid');
    
    console.log(`/profile?lawyerId=${lawyerId}`);
    // window.location.assign(`/profile?lawyerId=${lawyerId}`); // commented for this demo only, uncomment in production
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="search-result-info">
  <div class="search-result-name" data-lawyerid="{{ item.id }}">{{ item.firstName }} {{ item.lastName }}</div>
</div>

话虽这么说，让div 可点击并将其重定向到另一个页面并不是好的做法。我建议您将 HTML 转换为使用 <a /> 元素，并将数据直接输出到 href 属性。这样你根本不需要任何 JS：

<div class="search-result-info">
  <a href="/profile?lawyerId={{ item.id }}" class="search-result-name">{{ item.firstName }} {{ item.lastName }}</a>
</div>

【讨论】：