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

Question

我创建了 2 个数据-* 标签。数据类别和数据标签。单击 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 的 data-cat 和 data-tag。我如何根据我点击的是哪一个来获得唯一值？

（我知道 ID 是相同的，但我需要它们，因为列表是自动生成的）

Answer 1

ID 必须是唯一的。您可以使用相同的 class。

此外，您还需要使用单击的元素上下文 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);
});

Answer 2

使用 $(this) 定位点击的元素：

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

Answer 3

$('body').on('click', 'a#industry_url', function() {
  var value = $(this).attr('data-category');
  var value2 = $(this).attr('data-tag');
  var input = $('#text_tag_input');
  var input2 = $('#text_tag_input2');
  input.val(value);
  input2.val(value2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

你在这里用错了 ID。 ID must be unique。

但是，在这种情况下，您并不一定需要执行另一个选择器。您可以直接引用被点击的元素，因为它作为参数传递给点击处理程序；

$('.multi-dropdown-list-1 a').click(function (e) {
  var $target = e.currentTarget;
  var category = $target.data('category');
  var tag = $target.data('tag');
  ...
});

注意 jQuery 还提供了一个 shorthand 函数 data() 用于访问元素的数据属性。

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

How to get data-* content when ID is the same?

html

javascript

forms

tags

jquery