jQuery放進html裡的問題 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

jQuery放進html裡的問題

html jquery

Raven 2019-12-14 20:30:00 ‧ 2075 瀏覽

分享至

最近在學網頁，
想要改別人寫好的一部分卻沒有顯現......
想請問到底哪裡寫錯了QQ謝謝各位!!

Query

var fadeTime = 300;

/* 取得input */
$('.product-quantity input').change( function() {
  updateQuantity(this);
});
$('.product-removal button').click( function() {
  removeItem(this);
});

/* 總金額 */
function recalculateCart()
{
  var total = 0;
  $('.product').each(function () {
    total += parseFloat($(this).children('.product-line-price').children().text());
  });
  /* 淡入淡出 */
  $('.totals-value').fadeOut(fadeTime, function() {
    $('#cart-total').html(total);
    $('.totals-value').fadeIn(fadeTime);
  });
}

/* 更新數字 */
function updateQuantity(quantityInput)
{
  /* 找到價錢並計算 */
  var productRow = $(quantityInput).parent().parent().parent();/*一個tr*/
  var price = productRow.children('.product-price').children().text();
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;
  /* 小計ㄉ淡入淡出 */
  productRow.children('.product-line-price').children().each(function () {
    $(this).fadeOut(fadeTime, function() {
      $(this).text(linePrice);
      recalculateCart();
      $(this).fadeIn(fadeTime);
    });
  });  
}


/* 刪除一個口味 */
function removeItem(removeButton)
{
  var productRow = $(removeButton).parent().parent().parent();
  productRow.slideUp(fadeTime, function() {
    productRow.remove();
    recalculateCart();
  });
}

這是我的(有用Bootstrap)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>購物明細</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<style>
		body{font-family: "微軟正黑體";background-color: }
		tr{height: 250px;}
	</style>
	
</head>
<body>
<div class="container" style="padding: 30px;">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<img alt="140x140" src="LOGO/logo_gray.png" width="140" height="140">
		</div>
	</div>
	
	<div class="row clearfix"><!--選單-->
		<div class="col-md-12 column">
			<ul class="nav nav-tabs" >
			<li class="nav-item">
				<a class="nav-link active" href="#">購物明細</a></li>
			<li class="nav-item">
				<a class="nav-link" href="#">免費贈品</a></li>
			<li class="nav-item">
				<a class="nav-link" href="#">下次再買清單</a></li>
			</ul>
		</div>
	</div>
	
	<div class="row clearfix">
    <div class="col-md-12 column">
		<table class="table table-striped table-hover">
			<thead>
				<tr style="height: 50px;"><!--標題列-->
					<th></th>
					<th>口味</th>
					<th>價格</th>
					<th>數量</th>
					<th>小計</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="product"><!--購物車中的商品-->
					<div class="product-image">
                    <td style="vertical-align: middle;text-align: center;">
                        <img src="IMG/a1.png" width="150">
                    </td></div>
					<div class="product-details"><!--口味-->
						<td style="vertical-align: middle;">巧克力
                    </td></div>
					<div class="product-price"><!--價錢-->
						<td style="vertical-align: middle;">50
                    </td></div>
					<div class="product-quantity"><!--輸入的數量-->
						<td style="vertical-align: middle;">
						<input type="number" name="quantity" min="1" max="99" value="1"></td>
					</div>
					<div class="product-line-price"><!--小計-->
						<td style="vertical-align: middle;">50
                    </td></div>
					<div class="product-removal"><!--刪除扭-->
						<td style="vertical-align: middle;">
                            <button type="button" class="btn btn-default btn-danger">刪除</button>
						</td>
					</div>
				</tr>
				<tr class="product">
					<div class="product-image">
                        <td style="vertical-align: middle;text-align: center;"><img src="IMG/a1.png" width="150">
                    </td></div>
					<div class="product-details">
						<td style="vertical-align: middle;">草莓
                    </td></div>
					<div class="product-price">
						<td style="vertical-align: middle;">50
					</td></div>
					<div class="product-quantity">
                        <td style="vertical-align: middle;">
                            <input type="number" name="quantity" min="1" max="99" value="1"></td>
					</div>
					<div class="product-line-price">
                        <td style="vertical-align: middle;">250
                    </td></div>
					<div class="product-removal">
						<td style="vertical-align: middle;">
						<button type="button" class="btn btn-default btn-danger">刪除</button>
						</td>
					</div>
				</tr>
				<tr class="product">
					<div class="product-image">
                        <td style="vertical-align: middle;text-align: center;"><img src="IMG/a1.png" width="150">
                    </td></div>
					<div class="product-details">
						<td style="vertical-align: middle;">客製化
                    </td></div>
					<div class="product-price">
						<td style="vertical-align: middle;">150
					</td></div>
					<div class="product-quantity">
                        <td style="vertical-align: middle;">
                            <input type="number" name="quantity" min="1" max="99" value="1">
					</td></div>
					<div class="product-line-price">
                        <td style="vertical-align: middle;">150
                    </td></div>
					<div class="product-removal">
						<td style="vertical-align: middle;">
                            <button type="button" class="btn btn-default btn-danger">刪除</button>
						</td>
					</div>
				</tr>
			</tbody>
		</table>
	</div>
    </div>

	<div class="totals">
		<div class="totals-item totals-item-total">
    		<label>總計：</label>
    		<div class="totals-value" id="cart-total">300</div>
    	</div>
    </div>

	<button type="button" class="btn btn-default btn-warning btn-lg">結帳</button>


		
</div>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
	<script src="JS/cart.js"></script>

	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

3 個回答

1

dragonH

iT邦超人 5 級 ‧ 2019-12-14 20:33:53

在你的瀏覽器按 f12 打開 console

看 console 那頁有什麼訊息

先猜沒有引用 jquery

想要改別人寫好的一部分卻沒有顯現

一部份是哪部分呢

回應 14
分享
檢舉

看更多先前的回應...收起先前的回應...

阿展展展 iT邦好手 1 級 ‧ 2019-12-14 20:51:05 檢舉

原來是沒有引用阿

小魚 iT邦大師 1 級 ‧ 2019-12-14 21:41:02 檢舉

報告長官,
似乎不是那個問題.

dragonH iT邦超人 5 級 ‧ 2019-12-14 21:44:48 檢舉

所以說了猜了呀XD

畢竟他也沒給啥有用的訊息

看他好像補上了 code

Raven iT邦新手 5 級 ‧ 2019-12-14 22:05:53 檢舉

按了console出現是空白...是正常的嗎
https://codepen.io/elmahdim/pen/tEeDn
這個jquery的部分

剛剛才發現沒過新手階段所以回文失敗了不好意思TT

dragonH iT邦超人 5 級 ‧ 2019-12-14 22:16:57 檢舉

空白最好阿

代表可能沒有 error

所以你的問題是哪個部分沒出來

Raven iT邦新手 5 級 ‧ 2019-12-14 22:26:27 檢舉

調整數量的時候小計沒有淡入淡出的效果
金額也沒有動

dragonH iT邦超人 5 級 ‧ 2019-12-14 22:31:19 檢舉

呃

你的 codepen 沒這段阿

Raven iT邦新手 5 級 ‧ 2019-12-14 22:50:15 檢舉

我發現我傳錯了..........
https://codepen.io/justinklemm/pen/zAdoJ
是這個...

小魚 iT邦大師 1 級 ‧ 2019-12-14 22:52:28 檢舉

CodePen上面可以執行,
但是我放到本機不行,
是有少什麼檔案嗎?

dragonH iT邦超人 5 級 ‧ 2019-12-14 22:55:21 檢舉

可是你貼的這個 codepen 好像正常耶

看 console 應該就知道了

小魚 iT邦大師 1 級 ‧ 2019-12-14 22:58:34 檢舉

就是console甚麼都沒有啊...
還是說已經跟上面貼的程式碼不一樣了!?
那我還是先退場了.

Raven iT邦新手 5 級 ‧ 2019-12-14 23:21:58 檢舉

對
這個就是我拿來改可以正常跑的程式

dragonH iT邦超人 5 級 ‧ 2019-12-15 00:04:54 檢舉

你的 html 好像怪怪的

應該是

tr -> td -> div

這樣他才抓的到那個 input

Raven iT邦新手 5 級 ‧ 2019-12-16 18:23:36 檢舉

應該是抓錯沒錯
謝謝
我會再看看

登入發表回應

0

小魚

iT邦大師 1 級 ‧ 2019-12-14 20:52:53

應該是

/* 取得input */
$('.product-quantity input').change( function() {
  updateQuantity(this);
});
$('.product-removal button').click( function() {
  removeItem(this);
});

沒有觸發,

你要不要查一下CSS選擇器?
譬如說

$('button[class~="btn-danger"]').click( function() {
  removeItem(this);
});

不過就算改了還是有新的問題,
你再慢慢研究吧.

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

dragonH iT邦超人 5 級 ‧ 2019-12-14 21:48:00 檢舉

selector 那樣寫還是可以觸發唷

$('button[class~="btn-danger"]')

你的寫法反而會造成其他問題

因為 btn-danger 是 bootstrap 的 class

Raven iT邦新手 5 級 ‧ 2019-12-14 22:07:13 檢舉

好謝謝我再仔細的研究一下

小魚 iT邦大師 1 級 ‧ 2019-12-14 22:39:55 檢舉

1.我發現你的div包在td外面好像會被Chrome吃掉.
2.就算交換過來slideUp還是會報錯.

Raven iT邦新手 5 級 ‧ 2019-12-14 23:21:23 檢舉

Html的世界真奇妙
我還是砍掉重來ㄅ
謝大哥

登入發表回應

0

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-12-14 23:33:51

要抄人家的東西。也得了解一下那是什麼了。

我就先不告訴你你的問題在哪。
你就先告訴我，你懂這一行的意思嘛?

 var productRow = $(quantityInput).parent().parent().parent();/*一個tr*/

懂的話，就對應你的html。答案就出現了。

回應 3
分享
檢舉

Raven iT邦新手 5 級 ‧ 2019-12-15 12:42:49 檢舉

不是去找input改變的父親的父親的父親(曾祖父?)
然後再由這個去找product_price
我其實有改這邊原來這樣還是找錯了嗎

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-12-15 15:13:08 檢舉

算了，偷教你一擋。
你已經會用parent。了解它就是上一層的用意。
再非定義性的上層可能性。其實可以使用
closest('tr');
它會直接幫你往上到第一個符合資料的上層。
先教你這一點吧。

當然，你或許會發現到，有些人會考量到所謂的效能問題。
那就多多利用物件變數來處理就好。

Raven iT邦新手 5 級 ‧ 2019-12-16 18:22:35 檢舉

發現比起這樣到處抓東西來改還不如重頭開始學比較有效率

謝謝你撥空來回答

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙