单击删除按钮时突出显示评论和删除类

我是网络开发新手，目前正在从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);

来源

2015-06-03 useR

你是什么意思的“突出”？ – Vince

我创建了一个小提琴提供的东西接近所需的功能。我不确定你的意思是“突出”评论，但你要找的是事件代表团。使用jQuery的.on()功能，你可以听上动态创建的元素事件：

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

看到这个的jsfiddle：http://jsfiddle.net/voveson/5gL44z6m/2/

而对于在.on()函数是如何工作的详细信息，请参阅here。

来源

2015-06-03 04:38:41 Vince

嗨@Vince，非常感谢您的帮助。这是删除评论的有趣方法。最初我想要做点像我点击评论1，然后它会显示评论1框是活动的。然后它会被删除，我会点击垃圾按钮。现在，你做的方法，我不想做一个垃圾按钮。我怎样才能做到这一点，而不必做垃圾按钮。垃圾标志将直接出现在评论框中？ – useR

@useR我在我的答案中更新了jsFiddle的链接 - 您只需删除原始删除按钮即可。 – Vince

谢谢！那正是我需要的！非常感谢@Vince – useR

单击删除按钮时突出显示评论和删除类

回答

相关问题