Rumah > Soal Jawab > teks badan
1.想要给每个借款协议绑定不同URL,就是data里面的argeement,点击跳转至不同 url该如何做?我为何 var url=$(".argeement").attr("class");console.log(url);
是undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<ul>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js" type="text/javascript" charset="utf-8" ></script>
<script type="text/javascript" charset="utf-8" >
var DATA='[{"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231", "agreement": "http://www.mop.com/", "payed": "1", "amount": 15000, "loan_time": "2016-06-17"}, {"status": "DONE", "loan_limited": "1", "load_no": "123131123131231", "agreement": "http://www.163.com/", "payed": "1", "amount": 15000, "loan_time": "2016-05-17"}, {"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231231", "agreement": "http://www.baidu.com/", "payed": "1", "amount": 25000, "loan_time": "2016-06-10"}]';
var dataJSON=JSON.parse(DATA);
var sort=dataJSON.sort(function(a,b){
return a.status>b.status?-1:1
});
var template="<li class= $status$ ><p><p>借款金额</p><p>$amount$</p><p > $status$ </p></p>"
+"<p><p>借款日</p><p>$loan_time$</p></p>"
+"<p><p>还款期限</p><p>$loan_limited$</p></p>"
+"<p><p>已还</p><p>$payed$</p></p>"
+"<p><p>借款编号</p><p>$load_no$</p><p class='$argeement$'>《借款协议</p></p></li>"
dataJSON.forEach(function(item){
var tplReplace=template.replace("$amount$",item.amount)
.replace("$status$",item.status.toLowerCase())
.replace("$status$",function(){
if(item.status=="IN_PROGRESS"){
return "进行中"
}
else{
return "已完结"
}
})
.replace("$loan_time$",item.loan_time)
.replace("$loan_limited$",item.loan_limited)
.replace("$payed$",item.payed)
.replace("$argeement$",item.agreement)
.replace("$load_no$",item.load_no);
$("ul").append(tplReplace);
})
var bindUrl = function() {
var url=$(".argeement").attr("class");
window.location.href = url;
}
var url=$(".argeement").attr("class");
console.log(url);
//$(".argument").fastClick(bindUrl);
</script>
</html>
ringa_lee2017-04-11 11:42:38
你 agreement
很多地方打錯成 argeement
....
你是把網址給取代 class="$agreement$"
所以並不會有 .agreement
存在
強烈建議這種額外數據不要存在 class
中,可以存在 data-url
,但在這裡還是把元素改
成 a
放進 href
最直觀
FastClick 的用法錯了,下面有改過後的~
下面是修改過後的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<ul>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js" type="text/javascript" charset="utf-8" ></script>
<script type="text/javascript" charset="utf-8" >
$(function() {
FastClick.attach(document.body)
var DATA='[{"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231", "agreement": "123", "payed": "1", "amount": 15000, "loan_time": "2016-06-17"}, {"status": "DONE", "loan_limited": "1", "load_no": "123131123131231", "agreement": "http://www.163.com/", "payed": "1", "amount": 15000, "loan_time": "2016-05-17"}, {"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231231", "agreement": "http://www.baidu.com/", "payed": "1", "amount": 25000, "loan_time": "2016-06-10"}]';
var dataJSON = JSON.parse(DATA);
var sort = dataJSON.sort( function(a, b) {
return a.status > b.status ? -1 : 1
});
var template = '<li class="$status$"><p><p>借款金额</p><p>$amount$</p><p>$status$</p></p>'
+'<p><p>借款日</p><p>$loan_time$</p></p>'
+'<p><p>还款期限</p><p>$loan_limited$</p></p>'
+'<p><p>已还</p><p>$payed$</p></p>'
+'<p><p>借款编号</p><p>$load_no$</p><a class="agreement" href="$agreement$">《借款协议》</a></p></li>'
dataJSON.forEach(function(item) {
var tplReplace = template.replace("$amount$", item.amount)
.replace("$status$", item.status.toLowerCase())
.replace("$status$", function(){
if(item.status == "IN_PROGRESS"){
return "进行中"
}
else{
return "已完结"
}
})
.replace("$loan_time$",item.loan_time)
.replace("$loan_limited$",item.loan_limited)
.replace("$payed$",item.payed)
.replace("$agreement$",item.agreement)
.replace("$load_no$",item.load_no);
$("ul").append(tplReplace);
})
})
</script>
</html>