多个img id的attr显示在一行中

Question

在我的代码中，我在 li 标签中有 5 个图像，第一个 li 具有 activeimg 类。 我也有一个按钮。我希望当我单击按钮时，当前 li 应该将 activeimg 类删除到下一个 li，并且第一个 li img 的 attr('id') 应该显示，并且在单击下一个 li 时再次显示它也应该删除activeimg 类到下一个 li，attr 应该与第一个 li 的 img attr('id') 一起显示。

$(document).ready(function() {
  $('.clickme').on('click', function() {
    var tagname = $('.activeimg img').attr('id');
    $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg');
    $('#resultdiv').html(tagname).val;
  });
});

.menu_card ul {
  list-style-type: none;
}

.menu_card ul li img {
  width: 200px;
  height: 300px;
}

.menu_card ul li {
  list-style-type: none;
  position: absolute;
  display: none;
}

.menu_card ul li.activeimg {
  list-style-type: none;
  position: absolute;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form method="post" action="">
    <div class="row">
      <div class="col-12">
        <div class="menu_card">
          <ul id="allimg">
            <li class="activeimg"><img id="one" src="imges/img1.jpg"></li>
            <li><img id="two" src="imges/img2.jpg"></li>
            <li><img id="three" src="imges/img3.jpg"></li>
            <li><img id="four" src="imges/img4.jpg"></li>
            <li><img id="five" src="imges/img5.jpg"></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-2" style="margin-top: 350px;">
        <div class="pull-right clickme">
          <i class="fa fa-thumbs-o-up fa-3x"></i> <br/> Like
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 text-center" id="resultdiv">
      </div>
    </div>
  </form>
</div>

在我的代码中，我只能看到当前 li's 的 img attr。 在我的情况下，它总是替换前一个，就像单击第二个 li 时一样，它显示两个，一个被擦除。我希望它显示为一、二、三、四、五，而不是个人属性。

如果我必须使用复选框方法或其他方法，请建议我。提前谢谢

My CODE

Answer 1

根据您的小提琴，我为点击处理程序尝试了这个：

var tagname = $('.activeimg img').attr('id');

$('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg');

if (tagname) {
    var result = $('#resultdiv');
    var text = result.text().trim();

    if (text) {
        text += ',';
    }

    result.text(text + tagname);
}

这似乎给出了您要求的行为。

我保持前两行不变，其余的构成文本。唯一让这看起来复杂的是 id 之间需要逗号。

使用 DOM 来存储这样的状态（读取和写入元素文本）并不理想，但我尽量不要偏离您的原始代码太远。例如，您可以拥有一个包含喜欢图像列表的数组，然后从中生成元素文本，而不是依赖于旧文本。