Keyup和Focus不適用於不同的跨度-jQuery
[英]Keyup and Focus doesn't work right for different span - jQuery
問題描述
此代碼中的第一個問題是，當我鍵入多個晚上時，它無法計算出巴黎和東京的正確輸出價格，僅計算出紐約的正確價格。
我要解決的第二個問題是用戶必須提交該號碼並單擊該按鈕，然后該按鈕必須出現在右側部分。 現在，當我單擊“提交”按鈕時，所有報價都將關閉。 感謝幫助。
//// hide offer before the Dom is loaded //$('ul').hide() $(document).ready(function() { function showHideOffer() { $('ul').slideToggle(); } //click to show offers $('.card').on('click', '.showOffers', showHideOffer, function() { $(this).text($(this).text() === 'Hide Offers' ? "Show Offers" : "Hide Offers"); }); //click to hide offers - change name to show offers doesn't work!! $('.card').on('click','.showOffers', showHideOffer); // click to book, to show info and close button and span $('li').on('click', 'button', function(){ var offerName = $(this).closest('.tour').data('name'); var offerPrice = $(this).closest('.tour').data('price') var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>'); $(this).closest('.tour').append(message); $(this).prev().closest('.details').remove(); $(this).remove(); $('li').unbind("click"); }); // filter new offers by clicking a "new" button $('#buttons').on('click','.filterNew', function() { $('.tour').filter('.newOffer').addClass('highlightnew'); $('.highlightpopular').removeClass('highlightpopular'); $('#buttons').on('click', '.filterNew', function() { $('.highlightnew').removeClass('highlightnew'); }); }); // filter by popular offers $('#buttons').on('click', '.filterPopular', function() { $('.tour').filter('.popular').addClass('highlightpopular'); $('.highlightnew').removeClass('highlightnew'); }); // input for number nights $('.numberNights').on('keyup', function() { var numberNights = +$(this).val(); var priceOffer = +$('li').closest('.tour').data('price'); $('#numberPriceOffer').text(numberNights * priceOffer); $('li').find('#numberNightsOffer').text(numberNights); $('.numberNights').on('focus', function() { $('.numberNights').val(7); }); }); });
<!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"> <style> .selected { color: red; } .highlightnew { background: #3D9970; } .highlightpopular { background: #39CCCC; } ul { display:none; } </style> </head> <body> <div class="container"> <h2>Guided Tours</h2> <hr> <div id="tours" class="card"> <!-- click to show --> <button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button> <ul class="list-group list-group-flush"> <li class="usa tour newOffer list-group-item"; data-name="New York" data-price="550"> <h3>New York, USA</h3> <span class="details badge badge-success">$<span id="numberPriceOffer">1,899</span> for <span id="numberNightsOffer">7</span> nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="europe tour newOffer list-group-item" data-name="Paris" data-price="450"> <h3>Paris, France</h3> <span class="details badge badge-success">$<span id="numberPriceOffer">2,299</span> for <span id="numberNightsOffer">7</span> nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="asia tour popular list-group-item" data-name="Tokyo" data-price="650"> <h3>Tokyo, Japan</h3> <span class="details badge badge-success">$<span id="numberPriceOffer">3,799</span> for <span id="numberNightsOffer">7</span> nights</span> <button class="book btn btn-primary">Book Now</button> </li> </ul> <ul id="buttons" class="list-group list list-group-flush"> <button class="filterNew btn btn-info">New</button> <button class="filterPopular btn btn-info">Popular</button> </ul> </div> <form> <div class="form-group"> <label for="exampleInputEmail1">Number of nights</label> <input type="nights" class="numberNights form-control" aria-describedby="emailHelp" placeholder="Enter a number"> </div> <button type="submit" class="btn btn-primary btn-sm">Submit</button> </form> </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-23 14:10:20
解決唯一的第一個問題是，您對所有要約獎品使用了相同的id ，因此，對於發現的第一個id ，它可以正確更新。 取而代之的是，你需要遍歷所有的li和更新所有的價格separately 。 即使在您的代碼中，也僅一次獲取乘數var priceOffer = +$('li').closest('.tour').data('price');
檢查// input for number nights以獲取更新的代碼
//// hide offer before the Dom is loaded //$('ul').hide() $(document).ready(function() { function showHideOffer() { $('ul').slideToggle(); } //click to show offers $('.card').on('click', '.showOffers', showHideOffer, function() { $(this).text($(this).text() === 'Hide Offers' ? "Show Offers" : "Hide Offers"); }); //click to hide offers - change name to show offers doesn't work!! $('.card').on('click','.showOffers', showHideOffer); // click to book, to show info and close button and span $('li').on('click', 'button', function(){ var offerName = $(this).closest('.tour').data('name'); var offerPrice = $(this).closest('.tour').data('price') var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>'); $(this).closest('.tour').append(message); $(this).prev().closest('.details').remove(); $(this).remove(); $('li').unbind("click"); }); // filter new offers by clicking a "new" button $('#buttons').on('click','.filterNew', function() { $('.tour').filter('.newOffer').addClass('highlightnew'); $('.highlightpopular').removeClass('highlightpopular'); $('#buttons').on('click', '.filterNew', function() { $('.highlightnew').removeClass('highlightnew'); }); }); // filter by popular offers $('#buttons').on('click', '.filterPopular', function() { $('.tour').filter('.popular').addClass('highlightpopular'); $('.highlightnew').removeClass('highlightnew'); }); // input for number nights $('.numberNights').on('keyup', function() { var numberNights = +$(this).val(); $('.offer').find('li').each(function(){ var priceOffer = $(this).closest('.tour').data('price'); $(this).find('#numberPriceOffer').text(numberNights * priceOffer); $(this).find('#numberNightsOffer').text(numberNights); }); $('.numberNights').on('focus', function() { $('.numberNights').val(7); }); }); });
<!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"> <style> .selected { color: red; } .highlightnew { background: #3D9970; } .highlightpopular { background: #39CCCC; } ul { display:none; } </style> </head> <body> <div class="container"> <h2>Guided Tours</h2> <hr> <div id="tours" class="card"> <!-- click to show --> <button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button> <ul class="list-group list-group-flush offer"> <li class="usa tour newOffer list-group-item"; data-name="New York" data-price="550"> <h3>New York, USA</h3> <span class="details badge badge-success">$<span id="numberPriceOffer">1,899</span> for <span id="numberNightsOffer">7</span> nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="europe tour newOffer list-group-item" data-name="Paris" data-price="450"> <h3>Paris, France</h3> <span class="details badge badge-success">$<span id="numberPriceOffer">2,299</span> for <span id="numberNightsOffer">7</span> nights</span> <button class="book btn btn-primary">Book Now</button> </li> <li class="asia tour popular list-group-item" data-name="Tokyo" data-price="650"> <h3>Tokyo, Japan</h3> <span class="details badge badge-success">$<span id="numberPriceOffer">3,799</span> for <span id="numberNightsOffer">7</span> nights</span> <button class="book btn btn-primary">Book Now</button> </li> </ul> <ul id="buttons" class="list-group list list-group-flush"> <button class="filterNew btn btn-info">New</button> <button class="filterPopular btn btn-info">Popular</button> </ul> </div> <form> <div class="form-group"> <label for="exampleInputEmail1">Number of nights</label> <input type="nights" class="numberNights form-control" aria-describedby="emailHelp" placeholder="Enter a number"> </div> <button type="submit" class="btn btn-primary btn-sm">Submit</button> </form> </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綁定事件無法進行焦點，按鍵，擊鍵，擊鍵
[英]jQuery bind event on dynamic element for focus, keypress, keydown, keyup didn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.