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

时间：2018-08-05 17:47:37

标签： jquery html 

$(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>

我的问题是，当我将新项目添加到带有提示和标题的描述的列表中，然后单击它时，它显示标题，但默认显示说明，例如：我输入的标题是问候和说明当我单击它时，它会给我标题标题你好，但描述是描述11 当我单击“编辑”并更改标题和描述时，它会给我同样的按钮添加 是功能1的问题，如果这是我需要更改以解决此问题的问题 This is screenshot for the web application

这里

1 个答案:

答案 0 :(得分：0)

我使大部分（如果不是全部）功能正常工作。

基本上，主要的变化是使用data attribute来存储描述。

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

独立定义处理程序并对其进行编码，因此无需重新定义。在这里active类的使用确实对检索单击的锚非常有用。

在另一个编辑器中定义一个处理程序经常（如果不是总是这样）会导致问题，或者至少在编辑时需要解开面条。

当有多余的代码块时，使其成为要调用的命名函数。我用disabledButtons(bool)做的，看看。

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

Haa ...而且我认为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>

相关问题
最新问题