單擊按鈕時，removeClass不起作用
[英]removeClass doesn't work when clicking a button
問題描述
我在單擊按鈕時刪除類時遇到問題。 我使用jQuery，並希望使用removeClass('details')刪除它，但仍然無法正常工作。 你有什么想法嗎？ 提供了解決方案，我更新了代碼。 請參閱下面的答案。 只需放入$(this).prev().closest('.details').remove(); 在$(this).remove();之前$(this).remove(); 。
$(document).ready(function() { $('ul').on('click', 'button', function(){ var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>'); $(this).closest('.tour').append(message); $(this).remove(); // this doesn't remove a class details //$(this).removeClass('details'); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuidedTours</title> <link rel="stylesheet" type="text/css" href="wageup.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <h2>Guided Tours</h2> <hr> <div id="tours" class="card"> <ul class="list-group list-group-flush"> <li class="usa tour list-group-item"; data-discount="299"> <h3>New York, New York</h3> <span class="details badge badge-success">$1,899 for 7 nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="europe tour list-group-item" data-discount="176"> <h3>Paris, France</h3> <span class="details badge badge-success">$2,299 for 7 nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="asia tour list-group-item" data-discount="349"> <h3>Tokyo, Japan</h3> <span class="details badge badge-success">$3,799 for 7 nights</span> <button class="book btn btn-primary">Book Now</button> </li> </ul> </div> </div> <!-- Scripts --> <!-- Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- JS --> <script type="text/javascript" src="guidedtours.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2017-10-19 11:31:30
this是指button而不是span 。 您必須使用.prev() ：
$(this) // is button
.prev() // this is span
.removeClass('details');
$(document).ready(function() { $('ul').on('click', 'button', function(){ var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>'); $(this).closest('.tour').append(message); $(this).remove(); // this doesn't remove a class details $(this) // is button .prev() // this is span .removeClass('details'); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuidedTours</title> <link rel="stylesheet" type="text/css" href="wageup.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <h2>Guided Tours</h2> <hr> <div id="tours" class="card"> <ul class="list-group list-group-flush"> <li class="usa tour list-group-item"; data-discount="299"> <h3>New York, New York</h3> <span class="details badge badge-success">$1,899 for 7 nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="europe tour list-group-item" data-discount="176"> <h3>Paris, France</h3> <span class="details badge badge-success">$2,299 for 7 nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="asia tour list-group-item" data-discount="349"> <h3>Tokyo, Japan</h3> <span class="details badge badge-success">$3,799 for 7 nights</span> <button class="book btn btn-primary">Book Now</button> </li> </ul> </div> </div> <!-- Scripts --> <!-- Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- JS --> <script type="text/javascript" src="guidedtours.js"></script> </body> </html>
jQuery-.removeClass不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.