javascript - ID相同时如何获取data-*内容？

Question

我创建了 2 个 data-* 标签。数据类别和数据标签。单击 href 标签后，我想复制该数据类别和数据标签以形成输入。我的代码是:

<div class="multi-dropdown-list-1">
    <ul class="multi-dropdown-list">
        <li>
            <a href="#" class="ico-media" data-category="Accommodation" data-tag="Accommodation2" id="industry_url">
                Accommodation
                <i class="socialbakers-icons-before" data-icons-before="&#xe648;"></i>
            </a>
        </li>
        <li>
            <a href="#" class="ico-media" data-category="Airlines" data-tag="Airline2" id="industry_url">
                Airlines
                <i class="socialbakers-icons-before" data-icons-before="&#xe648;"></i>
            </a>
        </li>
     </ul>
</div>
<form accept-charset="UTF-8" action="Post" id="industry_form" name="industry_form" method="post" type="hidden">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">     
  <input id="text_tag_input" type="text" name="tags" />
  <input id="text_tag_input2" type="text" name="tags2" />
</form>

和我的 JavaScript:

<script>
    $('.multi-dropdown-list-1 a').click(function() {
    var value = $('#industry_url').attr('data-category');
    var value2 = $('#industry_url').attr('data-tag');
    var input = $('#text_tag_input');
    var input2 = $('#text_tag_input2');
    input.val(value);
    input2.val(value2);
</script>

目前，每当我单击任何 href 时，无论我单击哪个 href，我都会获得顶部 href 的数据猫和数据标签。我如何根据我点击的值获得唯一值？

(我意识到 ID 是相同的，但我需要它们，因为列表是自动生成的)

Answer 1

ID 必须是唯一的。你可以使用同一个类。

此外，您还需要使用单击的元素上下文 this 来定位它以及 .data() 而不是 .attr() 来获取元素数据属性。

$('.multi-dropdown-list-1 a').click(function() {
 var value = $(this).data('category');
 var value2 = $(this).data('tag');
 var input = $('#text_tag_input');
 var input2 = $('#text_tag_input2');
 input.val(value);
 input2.val(value2);
});