Question

当我点击#tag-list-item时，它应该获得壁橱数据名称

它如何适用于第一个但是如果我点击第二个#tag-list-item它会得到第一个数据名而不是第一个数据名。

问题当我点击#tag-list-item时，我该如何确定它？具有相同ID的正确getAttribute('data-name')？

<script type="text/javascript">
$(document).on('click', '#tag-list-item', function(e){
    var taglistitem = document.getElementById("tag-list-item");

    var tagbar = document.getElementById("tag-menu");

    var tagmenuitem = document.createElement("li");
    tagmenuitem.id = "tag-menu-item";
    tagbar.appendChild(tagmenuitem);

    var label = document.createElement("span");
    label.className = "label label-default";
    label.innerHTML = taglistitem.getAttribute('data-name');
    tagmenuitem.appendChild(label);
});
</script>

完整视图

<div id="tag">
<?php if ($tags) {?>
<div id="tag-list-group">
<?php foreach (array_chunk($tags, 4) as $tag) { ?>
<div class="row">
<?php foreach ($tag as $tag) {?>
<div class="col-sm-3 col-xs-6 text-center">
<a>
<span id="tag-list-item" data-id="<?php echo $tag['tag_id'];?>" data-name="<?php echo $tag['name'];?>"><?php echo $tag['tag_name'];?></span>
</a>
</div>
<?php }?>
</div>
<?php }?>
</div>
<?php }?>

<div id="tagbar"><ul id="tag-menu" class="list-inline"></ul></div>
</div>

<script type="text/javascript">
$(document).on('click', '#tag-list-item', function(e){
    var taglistitem = document.getElementById("tag-list-item");

    var tagbar = document.getElementById("tag-menu");

    var tagmenuitem = document.createElement("li");
    tagmenuitem.id = "tag-menu-item";
    tagbar.appendChild(tagmenuitem);

    var label = document.createElement("span");
    label.className = "label label-default";
    label.innerHTML = taglistitem.getAttribute('data-name');
    tagmenuitem.appendChild(label);
});
</script>

Answer 1

如果您有多个项目，我建议您不要使用id，而是上课。

但在所有情况下，您都可以使用this代替选择ID。

$(document).on('click', '.tag-list-item', function(e){
    $('#result').html(this.getAttribute('data-name'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="tag-list-item" data-name="First">Click me</button>
<button class="tag-list-item" data-name="Second">Click me</button>
<button class="tag-list-item" data-name="Third">Click me</button>

<div id="result"></div>

Answer 2

问题是因为当必须唯一时，您会多次重复相同的id次。您需要使用常见的class。

然后，您需要修改Click处理程序中的代码，以引用专门引发事件的元素，而不是尝试通过其id选择它。你也可以简单地混合使用jQuery和普通的JS代码。试试这个：

<!-- note the 'class' is added -->
<span class="tag-list-item" data-id="<?php echo $tag['tag_id'];?>" data-name="<?php echo $tag['name'];?>"><?php echo $tag['tag_name'];?></span>

$(document).on('click', '.tag-list-item', function(e){
    var $taglistitem = $(this);    
    var $tagbar = $("#tag-menu");
    var $tagmenuitem = $('<li class="tag-menu-item"></li>').appendTo($tagbar);
    $('<span class="label label-default">' + $taglistitem.data('name') + '</span').appendTo($tagmenuitem);
});

点击后如何获得具有相同ID的壁橱getAttribute（'data-name'）

2 个答案: