Question

本周刚开始学习jQuery。

我目前正致力于基本的“待办事项”工作。应用。我已经创建了一个表单，其中包含新的＆＃39; to-do＆＃39;输入，然后通过添加按钮添加到表中。一旦添加到表格中，添加的“待办事项”即可。有两个按钮。一个用于删除＆＃39;待办事项＆＃39; （目前正在运作），并且已经完成了＃39;按钮，我希望通过＆＃39;待办事项＆＃39;尽管如此，但仍然可以使“待办事项”文字清晰易读。

我在完成按钮功能时遇到了一些麻烦，并且想知道是否有人可以伸出援助之手。作为一名学生，我也想知道是否有可能有一个复选框而不是一个按钮，当检查时，会触发删除线。

此外，我有一个警告，当有重复的音符时会触发，但它仅在检测到第一个副本后才有效。我究竟做错了什么？

＆＃13;

$(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. 
  });

});

＆＃13;

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

＆＃13;

Answer 1

这四个变化符合您的要求。首先，根据是否标记为done：

，在注释上设置CSS

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＆＃39; s style="display:none"从#duplicateAlert（动画结束后jQuery＆＃39; s slideUp()添加）中移除show()：

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

＆＃13;

$(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. 
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以使用.note-done中的名称空间前缀来确定done类的范围，不管它是否存在。有帮助和缺点。

现在，在note内查找任何内容的查询是：

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

最好在.note上声明tr;这种方式.note是容器，嵌套元素可以访问类属性。这样，您就可以在Bootstrap的网格系统上使用您的代码，该系统使用.row和.col-..而不是tr和td。

Answer 2

这是一个演示：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;
}

Answer 3

您可以通过text-decoration: line-through

等方式通过CSS查看文本

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");
});

之后你可能希望通过event chaining隐藏完成按钮（将它们放在一起）以获得胜利！：

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

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

如何通过单击按钮或检查框来敲击表格行

3 个答案: