如何更改项目中的显示说明

Question

​

$(document).ready(function() {
      $(".list-group").on("click", "a", function() {
        var title = $("#ttl2");
        var text = $("#txt2");
        title.text($(this).text());
        text.text("Description" + " " + ($(this).index() + 1));
      });
      $("#btnadd").on("click", function() {
        do {
          var msg = prompt("Add Title for the Item");
        } while (msg == null || msg == "");
        do {
          var msg4 = prompt("Add Descriprion to the Item");
        } while (msg4 == null || msg == "");
        var s = $("#ttl1");
        var h = $("#txt1");
        var app = $(".list-group").append("<a  class=list-group-item list-group-item-action list-group-item>" + msg);
        $("#btndeleteall").attr("disabled", false);
        $("#btndelete").attr("disabled", false);
        $("#btnedit").attr("disabled", false);
      });
      $(".list-group").on("click", "a", function() {
        var lii = $(this);
        $("#btnedit").on("click", function() {
          var s = $(".card-title");
          var h = $(".card-text");
          do {
            var msg1 = prompt("Edit the Title of the Item");
          } while (msg1 == null || msg1 == "");
          lii.text(msg1);
          s.text(msg1);
          do {
            var msg2 = prompt("Edit the Description of the Item");
          } while (msg2 == null || msg2 == "");
          h.text(msg4);
        });
      });
      $("#btndeleteall").on("click", function() {
        $(".list-group").empty();
        $(".card").css("width", "100%");
        $("#ttl2").text("There is no Item in the List");
        $(".card-text").text(" ");
        $("#btndeleteall").attr("disabled", true);
        $("#btndelete").attr("disabled", true);
        $("#btnedit").attr("disabled", true);
      });
      $(".list-group").on("click", "a", function() {
        var li = $(this);
        $("#btndelete").on("click", function() {
          li.remove();
          var len = $("a").length;
          if (len == 0) {
            $("#btndeleteall").attr("disabled", true);
            $("#btndelete").attr("disabled", true);
            $("#btnedit").attr("disabled", true);
            $("#ttl2").text("There is no Item in the List");
            $(".card-text").text(" ");

          }
          $(".list-group").trigger("click");

        });
      });

.list-group {
  margin-top: 10px;
}

.card {
  margin-top: 15px;
  height: 120px;
  border-left: 5px solid aqua;
}

.btn-primary {
  margin-top: 5px;
}

.btn-danger {
  margin-top: 5px;
}

.card-title {
  margin-left: 10px;
}

.card-text {
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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">List Item 1</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 2</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 3</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 4</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 5</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 6</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 7</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 8</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">List Item 9</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item">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" id="ttl2"><span>List Item</span><span id="result"> none</span></h4>
          <p class="card-text" id="txt2"><span>Description</span><span id="result1"> 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>

​

问题是，当我从提示符中添加标题和描述到列表中，然后单击它时，它显示的是标题，但显示的是默认的描述--例如:我放置的标题是hello和description world，当我单击它时，它给我的标题是hello，但是描述是Description 11；当我单击“编辑并更改标题和描述”时，它给我的是函数1中相同的“添加”按钮，如果这是解决这个问题需要更改的内容，这是web应用程序的屏幕截图。

这里

Answer 1

我使你的大部分(如果不是全部)的功能发挥作用。

基本上，主要的改变是使用数据属性来存储描述。

然后，在每次单击#btnedit和#btnedit时定义$(".list-group")和#btnedit的单击处理程序.和使用3种不同的.on()方法。需要清理的..。至少是为了可读性。

独立定义处理程序并对其进行编码，这样就不需要重新定义它。在这里，使用active类来检索单击的锚确实是有用的。

在另一个处理程序中定义一个处理程序通常(如果不是总是的话)会导致问题，或者在编辑时至少会导致一个面条盘的解体。

当您有多余的代码块时，让它成为要调用的命名函数。我和disabledButtons(bool)一起做的，看一看。

您现在应该开始做的另一件主要事情是使用相关的类名和变量名。再一次，为了可读性。它非常有助于调试。

哈哈..。我认为do{} while()循环对prompts()毫无用处，因为它在这里停止代码执行.已删除。

​

$(document).ready(function() {

  var title = $(".card-title .result");
  var description = $(".card-description .result");
    
  // LIST ITEM CLICK
  $(".list-group").on("click", "a", function() {
    title.text($(this).text());
    description.text($(this).data("description"));
    
    // Make this on active
    $(".list-group a").removeClass("active");
    $(this).addClass("active");
  });
  
  
  // ADD AN ITEM
  $("#btnadd").on("click", function() {
    var prompt_title = prompt("Add Title for the Item");
    var prompt_description = prompt("Add Descriprion to the Item");
    
    // Added href='#' below
    var app = $(".list-group").append("<a href='#' class=list-group-item list-group-item-action list-group-item data-description='"+prompt_description+"'>" + prompt_title);
    disabledButtons(false);
  });
  
  
  // EDIT AN ITEM
  $("#btnedit").on("click", function() {
    if($(".active").length){
      var prompt_title = prompt("Edit the Title of the Item");
      var prompt_description = prompt("Edit the Description of the Item");
      
      $(".active").text(prompt_title).data("description",prompt_description);
      $(".active").trigger("click");
    }else{
      alert("Click an item first!");
    }
  });
    
  
  // DELETE ALL
  $("#btndeleteall").on("click", function() {
    $(".list-group").empty();
    $(".card").css("width", "100%");
    
    disabledButtons(true);
  });
  
  
  // DELETE THE ACTIVE
  $("#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!");
    }
  });
  
  
  function disabledButtons(bool){
    $("#btndeleteall").attr("disabled", bool);
    $("#btndelete").attr("disabled", bool);
    $("#btnedit").attr("disabled", bool);
    
    if(bool){
      title.text("There is no Item in the List");
      description.text(" ");
    }
  }
});

.list-group {
  margin-top: 10px;
}

.card {
  margin-top: 15px;
  height: 120px;
  border-left: 5px solid aqua;
}

.btn-primary {
  margin-top: 5px;
}

.btn-danger {
  margin-top: 5px;
}

.card-title {
  margin-left: 10px;
}

.card-text {
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<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>List Item: </span><span class="result"> none</span></h4>
          <p class="card-description"><span>Description: </span><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>

​