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的data-cat和data-tag。我如何获得唯一值取决于我点击哪一个？

（我知道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);
});

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

＆＃13;

$('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);
});

＆＃13;

<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>

＆＃13;

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还提供了一个简写函数data()，用于访问元素的数据属性。

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

4 个答案: