i new web development , learning jquery codecademy.
i made simple opinion pull.
problem: besides add comment, delete comment when highlight comment , press trash button.
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 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);
i have created fiddle provide close desired functionality. i'm not sure mean "highlight" comment, looking event delegation. using jquery's .on()
function, can listen events on dynamically created elements:
$('body').on('click', '.btndelete', function(){ $(this).closest('li').remove(); });
see jsfiddle: http://jsfiddle.net/voveson/5gl44z6m/2/
and more info on how .on()
function works, see here.
Comments
Post a Comment