Question

我是网络开发的新手，目前正在从codecademy学习jQuery。

我做了一个简单的意见拉。

问题：除了添加评论外，我想在突出显示评论并删除垃圾按钮时删除评论。

的index.html

<!doctype html>
<html>
    <head>
        <!--Boostrap CSs stylesheet-->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!--jQuery script-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!--Bootsrap js-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!--CSS stylesheet-->
        <link href="index.css" media="screen" rel="stylesheet" type="text/css">

    </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
        </div>
      </form>
      <div class="button-group pull-right">
        <p class="counter">140</p>
        <a href="#" class="btn btn-primary" id="btnPost"><div class= "glyphicon glyphicon-pencil" ></div></a>
        <a href="#" class="btn btn-primary" id="btnDelete"><div class= "glyphicon glyphicon-trash" ></div></a>
      </div>

      <ul class="posts">
      </ul>
    </div>

        <!--JavaScript script-->
        <script src="index.js"></script>

  </body>
</html>

index.css

html,body {
  font-family: courier, sans-serif;
  color: #404040;
  background-color: #eee;
}

.container {
  width: 520px;
  margin-top: 20px;
}

.button-group {
  margin-bottom: 20px;
  padding: 5px;
}

.counter {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
}

.posts {
  clear: both;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.posts li {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  min-height: 42px;
}

index.js

var main = function() {
//btnPost
  $('#btnPost').click(function() {
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    $('.status-box').val('');
    $('.counter').text('140');
    $('#btnPost').addClass('disabled'); 
  });

  $('.status-box').keyup(function() {
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);

    if(charactersLeft < 0) {
      $('#btnPost').addClass('disabled'); 
    }
    else if(charactersLeft == 140) {
      $('#btnPost').addClass('disabled');
    }
    else {
      $('#btnPost').removeClass('disabled');
    }
  });

  $('#btnPost').addClass('disabled');

 //btnDelete
  $('#btnDelete').click(function(){

  });
}

$(document).ready(main);

Answer 1

我创建了一个小提琴，为所需的功能提供 close 。我不确定你的意思是“突出”评论，但你要找的是事件授权。使用jQuery的.on()函数，您可以监听动态创建的元素上的事件：

$('body').on('click', '.btnDelete', function(){
    $(this).closest('li').remove();
});

请参阅此jsFiddle：http://jsfiddle.net/voveson/5gL44z6m/2/

有关.on()功能如何运作的详细信息，请参阅here。

单击删除按钮时突出显示注释并删除类

1 个答案: