1

这周刚开始学习jQuery。

我目前正在开发一个基本的“待办事项”应用程序。我创建了一个表单，在其中输入了新的“待办事项”，然后通过添加按钮将其添加到表格中。一旦添加到表格中，添加的“待办事项”会伴随着两个按钮。一个用于删除“待办事项”（当前起作用），还有一个“完成”按钮，我希望能够删除“待办事项”行，但仍使“待办事项”文本清晰可见。

我在让完成按钮起作用时遇到了一些麻烦，我想知道是否有人可以伸出援手。作为一名学生，我还想知道是否有可能有一个复选框而不是一个在选中时会触发删除线的按钮。

另外，我有一个警报，当有重复的笔记时会触发，但它只在检测到第一个重复后才有效。我究竟做错了什么？

$(document).ready(function() {

  $(".btn-primary").on("click", function(e) {
    e.preventDefault();

    //pull new note from html form input & trim for easier comparison
    var newNote = $("#newNote").val().trim();
    var isDuplicate = false;
    $("td.note-td").each(function() {
      if($(this).text().trim().toLowerCase() === newNote.toLowerCase()) {
        isDuplicate = true;
        return;
      }
    });

    //after checking for the duplicates, if duplicate, alert! Then slideback
    if(isDuplicate) {
      $("#duplicateAlert").html("Again? We already noted this.");
      $("p").slideUp(3000);
      return;
    }

    //adding newNote into the exisiting table
    var newRow = $("<tr>");
    var noteTd = $("<td>").addClass("note-td").append(newNote);
    var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete"); 
    
    //Try to add a checkbox with the strike-thru like this?
    var deleteTd = $("<td>").append(deleteBtn);
    
    //add strikethru button on the add click, just like the delete button 
    var strikeBtn = $("<button>").addClass("btn btn-success").append("Done");
    var strikeTd = $("<td>").append(strikeBtn);


    newRow.append(noteTd).append(deleteTd).append(strikeTd);
    $("tbody").append(newRow);

    //empty newNote field
    $("#newNote").val("").focus();
  });

  //functionality of delete button
  $("table").on("click", ".btn-danger", function() {
    if($("tr").length > 1) {
      $(this).parent().parent().remove();  
    }

  //Need functionality of doneBtn. 
  });

});
<body>
  <!--create a container where the user will add their new 'To-do'-->
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="col-md-6">
        <form class="form">
          <div class="form-group">
            <input type="text" class="form-control" id="newNote" placeholder="new to-do" autocomplete="off" />
            <p id="duplicateAlert"></p>
          </div>
          <button type="submit" class="btn btn-primary">Add</button>
        </form>
      </div>
     
   <!--create a table that will archive the added 'To-do'-->   
      <div class="col-md-6">
        <table class="table table-striped table-bordered table-hover table-condensed">
          <thead>
            <tr>
              <th>Things to-do</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="do_function.js"></script>
</body>

4

3 回答 3

2

这四个变化可以满足您的要求。首先，根据是否标记在便笺上设置 CSS done：

strikeBtn.on('click', function() {    
  $(this).closest('tr').find('.note-td')
  [ this.checked ? 'addClass' : 'removeClass' ]
  ('done')
} )

第二，CSS：

.note-td.done { text-decoration: line-through; }

接下来我们修改创建strikeBtn一个复选框而不是一个按钮：

var strikeBtn = $("<input type='checkbox'>")

我们使用 jQuery 删除style="display:none"from #duplicateAlert（即 jQueryslideUp()在动画结束后添加的）show()：

$("#duplicateAlert").html("Again? We already noted this.").show().slideUp(1000);


$(document).ready(function() {

  $(".btn-primary").on("click", function(e) {
    e.preventDefault();

    //pull new note from html form input & trim for easier comparison
    var newNote = $("#newNote").val().trim();
    var isDuplicate = false;
    $("td.note-td").each(function() {
      console.log($(this).text(), newNote);
      if($(this).text().trim().toLowerCase() === newNote.toLowerCase()) {
        console.log("dup");
        isDuplicate = true;
        return;
      }
    });
    console.log("isdup",isDuplicate);

    //after checking for the duplicates, if duplicate, alert! Then slideback
    if(isDuplicate) {
      $("#duplicateAlert").html("Again? We already noted this.")
        .show()
        .slideUp(1000);
      return;
    }

    //adding newNote into the exisiting table
    var newRow = $("<tr>");
    var noteTd = $("<td>").addClass("note-td").append(newNote);
    var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete"); 
    
    //Try to add a checkbox with the strike-thru like this?
    var deleteTd = $("<td>").append(deleteBtn);
    
    //add strikethru button on the add click, just like the delete button 
    var strikeBtn = $("<input type='checkbox'>").addClass("btn btn-success").append("Done");
    var strikeTd = $("<td>").append(strikeBtn);
    
    strikeBtn.on('click', function() {    
      $(this).closest('tr').find('.note-td')
      [ this.checked ? 'addClass' : 'removeClass' ]
      ('done')
    } )


    newRow.append(noteTd).append(deleteTd).append(strikeTd);
    $("tbody").append(newRow);

    //empty newNote field
    $("#newNote").val("").focus();
  });

  //functionality of delete button
  $("table").on("click", ".btn-danger", function() {
    if($("tr").length > 1) {
      $(this).parent().parent().remove();  
    }

  //Need functionality of doneBtn. 
  });

});
.note-td.done { text-decoration: line-through; }
<body>
  <!--create a container where the user will add their new 'To-do'-->
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="col-md-6">
        <form class="form">
          <div class="form-group">
            <input type="text" class="form-control" id="newNote" placeholder="new to-do" autocomplete="off" />
            <p id="duplicateAlert"></p>
          </div>
          <button type="submit" class="btn btn-primary">Add</button>
        </form>
      </div>
     
   <!--create a table that will archive the added 'To-do'-->   
      <div class="col-md-6">
        <table class="table table-striped table-bordered table-hover table-condensed">
          <thead>
            <tr>
              <th>Things to-do</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="do_function.js"></script>
</body>

我建议使用（抽象）类名，而不是显式（具体）样式或结构相关名称。例如，使用.note而不是.td-note，所以当样式改变时，名称仍然有意义。此外，请使用逻辑名称，例如.done指示.note. 这样你就可以将你的逻辑（或控制器）与你的风格（或视图）分开。然后共享模型。

您可以使用命名空间前缀，例如 in.note-done来确定done类的范围，不管是不是。有优点也有缺点。

现在在 a 中查找任何内容的查询note是这样的：

$(this).closest('tr').find('.note-td')

最好.note在tr; 这种方式.note是一个容器，其中包含您可以访问的嵌套元素，如属性。这样，您可以在 Bootstrap 的网格系统上使用您的代码，该系统使用.rowand.col-..而不是trand td。

于 2015-11-19T20:13:05.647 回答
1

这是一个演示： http: //jsfiddle.net/ou867kqq/5/ 我只需要添加...我希望这会有所帮助

strikeBtn.on('click',function(){
          var element = $(this).parent().parent().find('.note-td')
          if($(this).is(':checked')) {
            element.addClass('dashed');
          }
          else{
              element.removeClass('dashed');
          }
      })

CSS：

.dashed{
    text-decoration: overline underline line-through;
    color:#999;
}
于 2015-11-19T20:29:12.727 回答
0

您可以通过 CSS 删除文本，例如通过text-decoration: line-through：

line-through{
    text-decoration: line-through;
}

然后收听单击完成按钮的时间并将line-through类添加到您单击的表格列表元素中，如下所示：

$(".btn-success").click(function(){
    $(this).closest("tr").find("td:first").addClass("line-through");
});

或者，您可以只向其中添加 CSS 样式，但在我看来，拥有一个可以添加的类意味着您可以根据需要删除它：

$(".btn-success").click(function(){
    $(this).closest("tr").find("td:first").css("text-decoration", "line-through");
});

之后，您可能希望通过事件链接隐藏完成按钮（将它们放在一起）以获得胜利！：

$(".btn-success")
.click(function(){
    $(this).closest("tr").find("td:first").addClass("line-through");
})
.hide();

此单击事件处理程序将侦听完成按钮上发生的单击。单击按钮后，它将查找最近的表格行（父级的父级）。从那里它将找到其中的第一个表格单元格，其中包含新待办事项的文本。然后它将应用于这个 td 类line-through，并且通过的行反过来应该应用 css 样式。

于 2015-11-19T20:12:20.783 回答