时间戳

首页 > 解决方案 > 删除项目时自动单击项目

javascript - 删除项目时自动单击项目

问题描述

我需要在这个 jQuery 函数中添加什么，当我单击一个项目并删除它时，它会自动选择下一个项目并在卡片中显示它的标题和描述。如果我单击最后一项，会自动选择上一项并在卡片中显示它的标题和描述

例如，我有 10 个列表项。如果我单击第一项或第一项和最后一项之间的任何项，则会自动选择已删除项的下一项，如果单击列表项 10，则会自动选择列表项 9。

$("#btndelete").on("click", function() {
  if ($(".active").length) {
    $(".active").remove();
    var len = $("a").length;
    if (len == 0) {
      disabledButtons(true);
    } else {
      title.text("List Item none");
      description.text("Description none");
    }
  } else {
    alert("Click an item first!");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 1">List Item 1</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 2">List Item 2</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 3">List Item 3</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 4">List Item 4</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 5">List Item 5</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 6">List Item 6</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 7">List Item 7</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 8">List Item 8</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 9">List Item 9</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 10">List Item 10</a>
      </div>
    </div>
    <div class="col-md-6 col-lg-8">
      <div class="card card-primary card-inverse">
        <div class="card-block">
          <h4 class="card-title"><span class="result"> none</span></h4>
          <p class="card-description"><span class="result"> none</span></p>
        </div>
      </div>
      <div class="col-md-9">
        <button type="button" class="btn btn-primary" id="btnadd">Add</button>
        <button type="button" class="btn btn-primary" id="btnedit">Edit</button>
        <button type="button" class="btn btn-danger" id="btndelete">Delete</button>
        <button type="button" class="btn btn-danger" id="btndeleteall">DeleteAll</button>
      </div>
    </div>
  </div>
</div>

标签： javascriptjqueryhtml

解决方案

您可以使用 JQuery 的 index() 方法来查找活动链接的索引：

var myIndex = $('.active').index();

这应该在您删除它之前完成。然后您可以使用该索引设置新的活动链接，该索引不会更改（其余的将在您删除一个索引时向上移动一个索引）。

那应该让你开始。

编辑：

设置新的活动：

$('a').get(myIndex).addClass('active');

现在你只需要弄清楚删除最后一项。

推荐阅读