data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溫故而知"心"</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.demo').data("name", 22);
console.log($('.demo').data("name"));
console.log(typeof $('.demo').data("name"));
$('.demo').data("fruits", {
name: 'banana',
color: 'yellow'
})
console.log($('.demo').data("fruits"))
console.log(typeof $('.demo').data("fruits"))
</script>
</html>
data的運用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溫故而知"心"</title>
<style>
.tp1 {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="tp1">
<p></p>
<span></span>
<button>add</button>
</div>
<p class="show">
<span>sum </span>
<span class="sum">0</span>
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var shopArr = [
{
name: 'james solider',
shopName: 'nike',
price: 110,
id: '1001'
},
{
name: 'Rose crazyLight',
shopName: 'adidas',
price: 90,
id: '2002'
},
{
name: 'curry one',
shopName: 'Under Armour',
price: 120,
id: '3003'
}
]
shopArr.forEach(function (ele, index) {
var oCloneDom = $('.tp1').clone().removeClass('tp1');
oCloneDom.data({
id: ele.id,
shopName: ele.shopName,
price: ele.price
})
.find('p')
.text(ele.name)
.next()
.text(ele.price);
oCloneDom.insertBefore($('.show'));
})
$('.wrapper button').click(function () {
$('.sum').text(+$('.sum').text() + $(this).parent().data('price'))
console.log($(this).parent().data('id'))
})
</script>
</html>
