Question

我需要在此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>

Answer 1

您可以使用JQuery的index（）方法找到活动链接的索引：

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

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

那应该让您入门。

编辑：

设置新的活动状态：

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

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

删除项目时自动单击项目

1 个答案: